<!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. UNIQUE NullAble

    一般情况 UNIQUE 不应该出现nullable的 但是如果我们要支持也是有办法的,就是写一个filter. https://msdn.microsoft.com/en-us/library/ms1 ...

  2. 强大疯狂的qttools

    就是有点疑惑,为什么不整合到QT主项目中呢? 有空好好看看: https://github.com/qtproject/qttools/tree/dev/src ------------------- ...

  3. 2014-07-25　改进自定义菜单与使用SVN进行协同开发

    今天是在吾索实习的第13天.今天没有做过多的代码设计,只进行了一些代码的分析与进一步优化.其中,发现创建自定义菜单的关键代码书写可分为两部分: JSON格式的字符串在.net中的语法书写: strin ...

  4. HDOJ(HDU) 1406 完数

    Problem Description 完数的定义:如果一个大于1的正整数的所有因子之和等于它的本身,则称这个数是完数,比如6,28都是完数:6=1+2+3:28=1+2+4+7+14. 本题的任务是 ...

  5. 护肤品总结 Skin Care (1)

    很久没有更博了,最近过年在家,就写些生活上面的总结吧- 从护肤品开始,接下来陆陆续续会有化妆品,北美生活购物等. 因为是学生党,所以此帖中的东西基本都是价钱适中.因为经常买买买,所以用的好的坏的都会在 ...

  6. HDU-1047（DP-二进制状态压缩）

    Problem Description Ignatius has just come back school from the 30th ACM/ICPC. Now he has a lot of h ...

  7. MD中bitmap源代码分析--数据结构

    本篇分析bitmap的数据结构的设计,并基于此分析bitmap的工作机制. 为了后面更清楚的理解,先有个总体印象,给出整体的结构图: 在下面的描述中涉及到的内容可以对照到上图中相应部分,便于理解. 首 ...

  8. spring aop实现原理

    通过两种代理方式,一是JDK本身的代理方式,二是CGLIB提供的代理方式,在代理类的前面加事务begin,在后面加事务commit,需要的数据库连接从ThreadLocal中取

  9. 从MongoDB说起

    近日MongoDB宣布完成新一轮1.5亿美元融资,投资者包括EMC.Salesforce.com.英特尔.Red Hat以及Altimeter Capital等投资机构.作为当今最流行的NoSQL数据 ...

  10. S-Nim

    http://acm.hdu.edu.cn/showproblem.php?pid=1536 SG经典题,不多说 // File Name: hdu1536.cpp // Author: bo_jwo ...