JQ 点击目录跳转固定位置的最终版
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"/> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <style> .t-container{} .t-container h3{ line-height: 2em;} .t-container p{ height: 200px; background-color: #808080;} .fix-menu{ background: #f60; color: #fff; width: 120px; position: fixed; top: 200px; left: 0px;} .fix-menu li{ padding-left: 8px; line-height: 2em;} .fix-menu .fix-snav-hover{ font-weight: bold; background-color: #0099FF;} .fix-menu .fix-snav-hover:after{ content: "[在读]";} </style> </head> <body> <div style="height: 2000px;"></div> <div class="t-container g-w" id="container"> <h3>小标题一</h3> <p style="height: 600px;"></p> <h3>小标题二</h3> <p style="height: 80px;"></p> <h3>小标题三</h3> <p style="height: 2600px;"></p> <h3>小标题四</h3> <p style="height: 100px;"></p> <h3>小标题五</h3> <p style="height: 200px;"></p> </div> <div style="height: 2000px;"></div> <ul class="fix-menu" id="menu"></ul> <script> $(function(){ fixMenu(); }) //固定位置浮动的目录 function fixMenu(){ /** * cont 内容 * contTit 内容里的小标题 * menu 固定位置浮动的目录 * */ var cont = $("#container"),contTit = $("#container h3"),menu = $("#menu"); /** * contTitTop 每个内容里的小标题到窗口的顶部的高度 * winHeight 窗口的高度 * winScrollTop 窗口的顶部到网页的顶部的高度 * contBeginTop 第一个小标题到窗口的顶部的高度 * contEndTop 最后一个小标题到窗口的顶部的高度 * */ var contTitTop = 0,winHeight = 0,winScrollTop = 0,contBeginTop = 0,contEndTop = 0; //每个内容里的小标题之间的高度 var contTitBetweenHeight = []; for(var i=0;i<contTit.size()-1;i++){ contTitBetweenHeight[i] = contTit.eq(i+1).position().top - contTit.eq(i).position().top; } //获取文章的 h3 标签自动生成目录的小标题 for(var i=0;i<contTit.size();i++){ menu.append("<li>"+contTit.eq(i).text()+"</li>"); } //因为现在才生成li元素,所以现在才获取 var menuTit = $("#menu li"); //点击目录的小标题跳转到对应的文章 menuTit.click(function(){ $('html, body').animate({ scrollTop: contTit.eq($(this).index()).offset().top-40 },600); }); //显示当前内容的目录 $(window).scroll(function(){ winHeight = $(window).height(); winScrollTop = $(window).scrollTop(); contBeginTop = contTit.eq(0).offset().top-winScrollTop; contEndTop = contTit.eq(0).offset().top+cont.height()-winScrollTop-winHeight; if(contBeginTop>(winHeight-300)){ //如果头部还不到内容部分 目录的小标题不高亮 for(var i=0;i<contTit.size();i++){ menuTit.eq(i).removeClass("fix-snav-hover"); } }else if((contEndTop+winHeight)<0){ //如果尾部还不到内容部分 目录的小标题不高亮 for(var i=0;i<contTit.size();i++){ menuTit.eq(i).removeClass("fix-snav-hover"); } }else{ //目录的小标题开始高亮 for(var i=0;i<contTit.size();i++){ //除了最后的一个小标题 if(i<contTit.size()-1){ contTitTop = contTit.eq(i+1).offset().top-winScrollTop; if(contTitBetweenHeight[i]>winHeight*0.5){ if(contTitTop>winHeight*0.3){ menuTit.eq(i).addClass("fix-snav-hover").siblings().removeClass("fix-snav-hover"); break; } }else{ if(contTitTop>contTitBetweenHeight[i]*0.5){ menuTit.eq(i).addClass("fix-snav-hover").siblings().removeClass("fix-snav-hover"); break; } } }else{ menuTit.eq(i).addClass("fix-snav-hover").siblings().removeClass("fix-snav-hover"); break; } } } }); } </script> </body> </html>
效果图: