<!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. NUMBER BASE CONVERSION（进制转换）

    Description Write a program to convert numbers in one base to numbers in a second base. There are 62 ...

  2. VHDL学习之TEXTIO在仿真中的应用

    TEXTIO 在VHDL 仿真与磁盘文件之间架起了桥梁,使用文本文件扩展VHDL 的仿真功能.本文介绍TEXTIO 程序包,以一个加法器实例说明TEXTIO 的使用方法,最后使用ModelSim 对设 ...

  3. jboss部署应用

    简单的部署应用. 第一种方法是直接写JSP代码,然后放到指定的WAR文件夹中. 第二种,是同时META-INF下的application.xml文件,然后用JAR -CF编成WAR,再集合JSP形成E ...

  4. PCB的阻抗控制

    多层板的结构: 通常我们所说的多层板是由芯板和半固化片互相层叠压合而成的,芯板是一种硬质的.有特定厚度的.两面包铜的板材,是构成印制板的基础材料.而半固化片构成所谓的浸润层,起到粘合芯板的作用,虽然也 ...

  5. 注意:rsyslog 源码安装 会出现日志重复发的情况,需要rpm包安装

    cd /etc/yum.repos.d;wget http://rpms.adiscon.com/v8-stable/rsyslog.repo uat-web02:/etc/yum.repos.d# ...

  6. makefile工程管理

    个人理解吧,makefile就是写一个指定格式的文件,将一系列的编译.链接.转换等操作打包在一起,方便以后一键生成可执行的二进制文件而产生的.下面记录一下这种文件的写法,方便以后忘了来查询. make ...

  7. HDU_2042——递归反推

    Problem Description 你活的不容易,我活的不容易,他活的也不容易.不过,如果你看了下面的故事,就会知道,有位老汉比你还不容易.重庆市郊黄泥板村的徐老汉(大号徐东海,简称XDH)这两年 ...

  8. 设置MyEclipse的右击新建后面的选项

    转自:http://blog.sina.com.cn/s/blog_929b09ac010197g6.html,做了修改 最近发现在MyEclipse右击后,新建后面的菜单选项太少了,新建一个文件,还 ...

  9. C#request 请求响应

    /// <summary> /// 提交POST请求 /// </summary> /// <param name="url">提交地址< ...

  10. StringBuffer学习笔记

    StringBuffer是什么? StringBuffer是使用缓冲区的,本身也是操作字符串的,它是一个具体的操作类.与String类不同的是,它其中的内容是可以改变的.它不能像String那样采用直 ...