<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <title>groupList demo</title>

  <script type='text/javascript' src='http://cdn.staticfile.org/jquery/1.11.1/jquery.js'></script>

  <style type='text/css'>

    dl dt{background:#ccc;padding:5px;}

    dl li{padding:5px;list-style: none;}

    p{height:100px;}

    html,body{margin:0;padding:0;}

  </style>

<script type='text/javascript'>//<![CDATA[

$(function(){

    //$('dl').groupList();      //相对窗口顶部

    $('dl').groupList(true);

});

$.fn.groupList = function(selfScroll){

     var list = this;

    var listTopOffset = list.offset().top;

    var titleHeight = $(list).find('dt:first').height();

    var currentContext = selfScroll ? list : window;

    if(selfScroll){

        list.css({

            'height':$(window).height() - listTopOffset,

            'overflow':'auto'

        });

    }

    $(currentContext).on('scroll',function(){

        if($(currentContext).scrollTop()-(selfScroll ? 0 : listTopOffset) < titleHeight){

            clearFixed();

        }else{

            var lis = list.find('li');

            for(var i = 0, len = lis.length ; i < len ; i++){

                if(isOnSight(lis[i])){

                    clearFixed().filter('.clone').remove();

                    lis.eq(i).parent().parent().prev().clone(true).addClass('clone').css({

                        'top': selfScroll ? listTopOffset : 0,

                        'position':'fixed',

                        'width':'100%'

                    }).appendTo(list);

                    break;

                }

            }

        }

    });

    var isOnSight = function(item){

        return selfScroll ? listTopOffset < $(item).offset().top + $(item).outerHeight() : $(currentContext).scrollTop() <  $(item).offset().top + $(item).outerHeight();

    }

    var clearFixed = function(){

        return $(list).find('dt').css({

            'position':''

        });

    }

}

//]]>  

</script>

</head>

<body>

    <p>ale</p>

  <dl>

    <dt>A</dt>

    <dd>

        <ul>

            <li>abandon</li>

            <li>abnormal</li>

            <li>abstinence</li>

            <li>abort</li>

            <li>abortive</li>

            <li>abeyance</li>

            <li>abscond</li>

            <li>absolve</li>

            <li>abrogate</li>

            <li>about</li>

            <li>abandon</li>

            <li>abnormal</li>

            <li>abstinence</li>

            <li>abort</li>

            <li>abortive</li>

            <li>abeyance</li>

            <li>abscond</li>

            <li>absolve</li>

            <li>abrogate</li>

            <li id='check'>about</li>

            <li>abandon</li>

            <li>abnormal</li>

            <li>abstinence</li>

            <li>abort</li>

            <li>abortive</li>

            <li>abeyance</li>

            <li>abscond</li>

            <li>absolve</li>

            <li>abrogate</li>

        </ul>

    </dd>

    <dt>B</dt>

    <dd>

        <ul>

            <li>banana</li>

            <li>blue</li>

            <li>background</li>

            <li>backward</li>

            <li>bacon</li>

            <li>bacteria</li>

            <li>baggage</li>

            <li>balance</li>

            <li>banana</li>

            <li>blue</li>

            <li>background</li>

            <li>backward</li>

            <li>bacon</li>

            <li>bacteria</li>

            <li>baggage</li>

            <li>balance</li>

            <li>banana</li>

            <li>blue</li>

            <li>background</li>

            <li>backward</li>

            <li>bacon</li>

            <li>bacteria</li>

            <li>baggage</li>

            <li>balance</li>

        </ul>

    </dd>

    <dt>C</dt>

    <dd>

        <ul>

            <li>banana</li>

            <li>blue</li>

            <li>background</li>

            <li>backward</li>

            <li>bacon</li>

            <li>bacteria</li>

            <li>baggage</li>

            <li>balance</li>

            <li>banana</li>

            <li>blue</li>

            <li>background</li>

            <li>backward</li>

            <li>bacon</li>

            <li>bacteria</li>

            <li>baggage</li>

            <li>balance</li>

            <li>banana</li>

            <li>blue</li>

            <li>background</li>

            <li>backward</li>

            <li>bacon</li>

            <li>bacteria</li>

            <li>baggage</li>

            <li>balance</li>

            <li>blue</li>

            <li>background</li>

            <li>backward</li>

            <li>bacon</li>

            <li>bacteria</li>

            <li>baggage</li>

            <li>balance</li>

        </ul>

    </dd>

</dl>

</body>

</html>

js版iphone通讯录分组列表效果的更多相关文章

  1. 鸿蒙js开发7 鸿蒙分组列表和弹出menu菜单

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口]目录:1.鸿蒙视图效果2.js业务数据和事件3.页面视图代码4.跳转页面后的视图层5.js业务逻辑部分6.<鸿蒙js开发& ...

  2. Web版RSS阅读器（二）——使用dTree树形加载rss订阅分组列表

    在上一边博客<Web版RSS阅读器(一)——dom4j读取xml(opml)文件>中已经讲过如何读取rss订阅文件了.这次就把订阅的文件读取到页面上,使用树形结构进行加载显示. 不打算使用 ...

  3. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. [WP8.1UI控件编程]SemanticZoom控件实现分组列表

    11.1.5 SemanticZoom实现分组列表 SemanticZoom控件可以让用户实现一种更加高级的列表,这种列表可以对列表的项目进行分组,同时这个SemanticZoom控件会提供两个具有相 ...

  5. 史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

    React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...

  6. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  7. 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  8. Slip.js – 在触摸屏上实现列表的滑动排序功能

    Slip.js 是一个很小的 JavaScript 库,用于实现对触摸屏的互动 Swipe 和对元素重新排序列表(Reordering).Slip.js 没有任何的依赖,你可以通过自定义 DOM 事件 ...

  9. 常见排序算法（JS版）

    常见排序算法(JS版)包括: 内置排序,冒泡排序,选择排序,插入排序,希尔排序,快速排序(递归 & 堆栈),归并排序,堆排序,以及分析每种排序算法的执行时间. index.html <! ...

随机推荐

  1. 设置 cell点击 背景色

    //设置 cell点击 背景色 cell.selectionStyle = UITableViewCellSelectionStyleDefault; cell.selectedBackgroundV ...

  2. iOS中常用的四种数据持久化方法简介

    iOS中常用的四种数据持久化方法简介 iOS中的数据持久化方式,基本上有以下四种:属性列表.对象归档.SQLite3和Core Data 1.属性列表涉及到的主要类:NSUserDefaults,一般 ...

  3. 如何获取网站icon

    获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon(<link rel="shortcut ico ...

  4. SSD、高级格式化硬盘，4K，分区，对齐，Ghost能不能用的解释用SSD的都可以看看

    或者以上,建议选择2048,这是Win7分区使用的值,实际对齐大小就为1024K.  4.如何知道是否对齐?  使用工具AS SSD Benchmark(HDTune Pro 4.6目前测的禁绝)   ...

  5. java构造方法的不同

    分为有参数和无参数,还有THIS的使用方法,可用于传递给类,也可用于调用其它构造方法. public class Book { private String name; public Book(){ ...

  6. MFC新婚之夜（笑昏，大概是指MFC的人固步自封）

    请问学会MFC都要学些什么呢?DOC-VIEW,OLE,UI线程,泵,钩,还是堆,栈内存分配与回收的机制?还是那些各种各样的CHAR,还是__cdecl, __stdcall,PASCAL等等,或者编 ...

  7. hdu 1860 统计字符

    Problem Description 统计一个给定字符串中指定的字符出现的次数 Input 测试输入包含若干测试用例,每个测试用例包含2行,第1行为一个长度不超过5的字符串,第2行为一个长度不超过8 ...

  8. SQL Server 各任务所维护

    SQL Server 正在运行的代码查看 SELECT [Spid] = session_id , ecid , [Database] = DB_NAME(sp.dbid) , [User] = nt ...

  9. localStrorage、 sessionStorage 、cookie

          HTML5中增加了两种全新数据存储方式:Web Storage和Web SQL Database. 前者可用于临时或永久保存客户端的少量数据:后者是客户端本地化的一套数据库系统,可将大量数 ...

  10. ASIHTTPRequest使用指南---<<翻译稿>>

    ASIHTTPRequest使用指南---<<翻译稿>> 当第一次使用ASIHTTPRequest进行http请求时,会出现非常多的bug提示.查了一些资料,发现在少倒入了几个 ...