<!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>