<!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. codevs 1068 乌龟棋

    题目描述 Description 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一 的起点,第N格是终点,游戏要求玩家控制 ...

  2. COJ 0560 4015划分数

    4015 划分数 难度级别:B: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 有n个无区别的物品,将他们划分成不超过m组,求出划分方法数模 ...

  3. 【转】listView中，checkBox的显示和隐藏

    原文网址:http://www.cnblogs.com/vicma/p/3460500.html 在listView中,每个item都有一个ChexBox,当显示的时候在listView外面设置一个按 ...

  4. Storm拓扑的并行度（parallelism）介绍

    Storm拓扑的并行度(parallelism)介绍 1.Storm分为3个主要实体,用于在Storm集群中运行拓扑        工作进程:Worker Process,也称为Worker      ...

  5. php PDO操作乱码问题

    前阶段用php写了一个小网页(每周一练),然后就一直忙着其他事也没管它,今天想着给它写个添加数据的页面,用pdo操作,没想到插入数据库的中文数据竟然乱码了,竟然乱码了!然后我就方了,赶紧检测数据传输过 ...

  6. 关于数据表命名为mysql保留的时候的操作

    今天操作数据表的时候,发现order数据表无法进行操作,必须加上反单引号才能进行操作,查了一下原因: 反引号是用来区别mysql关键字的,比如,如果你有一个表名叫select,你就必须写成`selec ...

  7. 一、spark 数据类型(Data Types)

    Data Types - MLlib(数据类型)       MLlib支持存储在单机上的局部向量和局部矩阵,也可以支持通过一个或多个RDD(可伸缩数据集)表示的分布式矩阵.局部向量和局部矩阵是用作公 ...

  8. [深入React] 5.MVC

    react 是一种典型的MVC框架. 在jquery中,我们都是针对dom编程,由dom事件触发dom改变,MVC三层代码混在一起. 比如点击变颜色 $('#btn').click(function( ...

  9. lesson6:java线程中断

    正常的情况下,业务系统都不会去中断它的线程,但是由于一些特殊情况的发生,线程已经不能正常结束了,并且此类线程已经影响到业务系统提供服务的能力,如果系统设计的健壮,便会通过监控线程去主动的中断此类线程. ...

  10. eclipse format的时候如何让@param后不换行