在电商网站，我们有一些tab 想要他，随着下拉，tab自动切换的方式，
这样无论对seo还是客户体验都很不错，下面是实现的一个例子，代码如下：
<!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);
if(document.body.scrollTop){
scroll = document.body;
}else if(document.documentElement.scrollTop){
scroll = document.documentElement;
}
interval = setInterval(function(){
if(scroll.scrollTop + a<=textChild[self.index].offsetTop){
scroll.scrollTop += 40;
if(scroll.scrollTop + a>=textChild[self.index].offsetTop){
scroll.scrollTop = textChild[self.index].offsetTop-a;
clearInterval(interval);
}
}else{
scroll.scrollTop /= 1.1;
if(scroll.scrollTop + a<=textChild[self.index].offsetTop){
scroll.scrollTop = textChild[self.index].offsetTop-a;
clearInterval(interval);
}
}
},40);
};
}
</script>
</body>
</html>