jq實現的樓層效果
阿新 • • 發佈：2019-01-03
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul{ position: fixed; left: 0; top: 30%; } li{ height: 40px; line-height: 40px; list-style: none; width: 100px; text-align: center; background: #f01; color: #ffffff; cursor:pointer; } a{ color: #ffffff; text-decoration: none; } #a1{background: #dddddd; height: 900px; width: 90%; margin-left: 10%; } #a2{background: #dddddd; height: 900px; width: 90%; margin-left: 10%; } #a3{background: #dddddd; height: 900px; width: 90%; margin-left: 10%; } #a4{background: #dddddd; height: 900px; width: 90%; margin-left: 10%; } #a5{background: #dddddd; height: 900px; width: 90%; margin-left: 10%; } .active{ background: #ddd; } .active>a{ color: #000; } #LouDao{ display: none; } #main{ overflow: hidden; } </style> </head> <body> <ul id="LouDao"> <li><a>第一章</a></li> <li><a>第二章</a></li> <li><a>第三章</a></li> <li><a>第四章</a></li> <li><a>第五章</a></li> </ul> <div id="main"> <div id="a1"> 這是一個悲慘的故事 </div> <div id="a2">這是一個歡快的故事</div> <div id="a3">這是一個傷心的故事</div> <div id="a4">這是一個幸福的故事</div> <div id="a5">這是一個狗血的故事</div> </div> <footer> <div style="height: 900px;width: 100%">底部</div> </footer> </body> <script src="jquery-1.11.3.js"></script> <script> var daohang=$("#LouDao");//樓層標籤 var li=$("#LouDao>li");//獲取目錄li var main=$("#main>div");//文章主要內容 $(window).scroll(function() { //獲取到頁面總高度 var HeightAll = $("html,body").height(); //獲取滾動條位置 var iTop = $(window).scrollTop(); for(var i=0;i<main.length;i++){ //樓層的顯示和隱藏 if(iTop>=main[0].offsetTop){ daohang.show(); }else{ daohang.hide(); }; //樓層的聯動 var num=0 for(var i=0;i<main.length;i++){ if(iTop>=main[i].offsetTop){ num=i; } li[i].className='';//設定li中的class為空 }; li[num].className='active'; for(var i=0;i<li.length;i++){ li[i].onclick=function(){ for(var j=0;j<li.length;j++){ if(this==li[j]){ $("html,body").animate({scrollTop:main[j].offsetTop},500); } } } } } }) function delay(obj){ var l=0; var t=0; while(obj){ l=l+obj.offsetLeft; t=t+obj.offsetTop; obj=obj.offsetParent; } return{left:l,top:t}; } // new delay(); // console.log(delay(daohang).top); </script> </html>