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

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

 

大家有兴趣的可以复制下看下效果，谢谢大家浏览！
原文链接：https://blog.csdn.net/wl7175/article/details/52068112/

posted @ 2020-01-02 13:44  sevene  阅读(1423)  评论(0)  编辑  收藏  举报