您的位置：首页 > Web前端 > JavaScript

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

2016-07-29 19:47 681 查看

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端 javascript

相关文章推荐

新的分享

章节导航