close
按钮
css
居中
code
demo
网站订制
彩蛋
demo
<!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://zaole.net/sliding.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>