原生js實現隨著滾動條滾動，導航會自動切換的效果
阿新 • • 發佈：2019-01-07
最近學習前端，把前面用原生js寫的一段有關tab切換效果的程式碼貼上，實現的效果比較簡陋，請大家見諒
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>隨著滾動條滾動的Tab切換</title> <style> *{ list-style:none; margin:0; padding:0; text-decoration:none; font-family:'Microsoft YaHei'; } li{ width:100px; height:50px; line-height:50px; float:left; border-right:2px solid #eee; text-align:center; cursor:pointer; } ul{ width:1200px; margin:0 auto; } .nav{ height:52px; width:100%; background:#f5f5f5; } .nav .cur{ background:#fff; border-top:2px solid #1a92cf; color:#1a92cf; } .fixed{ position:fixed; top:0; left:0; } a{ color:#505050; } </style> </head> <body> <br/><br/><br/><br/><br/><br/><br/> <div class="nav" id="nav-container"> <ul id="nav-box">` <li class="cur">text1-nav</li> <li>text2-nav</li> <li>text3-nav</li> </ul> </div> <div id="text"> <div style="width:100%;height:500px;background:green;text-align:center;">text1</div> <div style="width:100%;height:500px;background:yellow;text-align:center;">text2</div> <div style="width:100%;height:500px;background:blue;text-align:center;">text3</div> </div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <script> var navContainer = document.getElementById("nav-container"); var navBox = document.getElementById("nav-box"); var text = document.getElementById("text"); var navBoxChild = navBox.children; var textChild = text.children; var num = navContainer.offsetTop; var a = navContainer.offsetHeight; window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(scrollTop >= num){ navContainer.className = "nav fixed"; text.style.paddingTop = a +"px"; }else{ navContainer.className = "nav"; text.style.paddingTop = ""; } //當導航與相應文件接觸的時候自動切換 //method1 for(var i=0;i<navBoxChild.length;i++){ if( scrollTop + a >= textChild[i].offsetTop){ for(var j=0;j<navBoxChild.length;j++){ navBoxChild[j].className = ""; } navBoxChild[i].className = "cur"; } } }; for(var i=0;i<navBoxChild.length;i++){ var interval; navBoxChild[i].index = i; navBoxChild[i].onclick = function(){ var self = this; clearInterval(interval); interval = setInterval(function(){ if(document.body.scrollTop + a<=textChild[self.index].offsetTop){ document.body.scrollTop += 40; if(document.body.scrollTop + a>=textChild[self.index].offsetTop){ document.body.scrollTop = textChild[self.index].offsetTop-a; clearInterval(interval); } }else{ document.body.scrollTop /= 1.1; if(document.body.scrollTop + a<=textChild[self.index].offsetTop){ document.body.scrollTop = textChild[self.index].offsetTop-a; clearInterval(interval); } } },40); }; } </script> </body> </html>
大家有興趣的可以複製下看下效果，謝謝大家瀏覽！