原生js实现随着滚动条滚动，导航会自动切换的效果

来源：互联网发布：汉字笔顺查询软件编辑：程序博客网时间：2024/06/05 07:31

最近学习前端，把前面用原生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>

大家有兴趣的可以复制下看下效果，谢谢大家浏览！

0 0