<!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. COJ 0036 数数happy有多少个？

    数数happy有多少个? 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 图图是个爱动脑子.观察能力很强的好学生.近期他正学英语 ...

  2. 从windows server 2003中学到的事儿

    2003让我学会了几件事儿, 第一.自己会装系统了. 第二.知道很多选项是可以自己进行设置的.这点很重要,本来xp用得很习惯,然后很多都理所当然得认为,就应该是那个样子,可是,并不是的. 在2003不 ...

  3. iOS 9之分屏多任务（Split View）

    金田(github 示例源码) 多任务(multitasking)算是iOS9中最引人瞩目的核心新特性了,之前越狱版用户就用过类似的插件,微软的 苏菲 (Windows Surface)系列也有分屏多 ...

  4. Android录音服务

    MediaRecorder Mediarecorder=new MediaRecorder();//创建一个MediaRecorder对象 Mediarecorder.setAudioSource(M ...

  5. Android新浪微博客户端（一）——主框架搭建

    原文出自:方杰| http://fangjie.info/?p=62 转载请注明出处 提前声明的是,我是按照Ivan的这套教程学下来的. 首先,对于任何应用我们都需要建立一套消息处理机制,就是当用户在 ...

  6. sicily 1035. DNA matching

    题意:判断基因链是否匹配,匹配的双链数加1,并要标记,下次比较不能重用! 解法: 打擂台法 #include<iostream> #include<string> #inclu ...

  7. rsyslog同步history日志(转载)

    前言 由于公司业务是由公司内部开人员及外包团队共同开发,所以需要使用rsyslog对history日志做收集.审计.虽然搭建及配置非常简单,但是在日常运维工作中很实用,所以记录下,方便日后快速搭建.如 ...

  8. 一种调用opencv库的C++工程通用的Makefile模板

    第一次自己写makefile,记录一下 #Compilers #CXX=/opt/compiler/gcc-/bin/g++ CXX = g++ #Includes INCLUDE_FLAGS = - ...

  9. (原)Apache添加完限速模块后的文件

    点我下载 解压后得到apache2文件夹和readme.txt文本 按照readme.txt修改apache2文件夹.

  10. 判断IE版本的HTML语句详解<!--[if IE]> <![endif]--> - AnswerCard

    一个页面里面只能有一句这样的判断 我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请 ...