导航随滚动改变样式
<!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>
<div class="nav" id="nav-container">
<ul class="menu" 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>
<script>
var navContainer = document.getElementById("nav-container");//获取导航ID
var navBox = document.getElementById("nav-box");//获取ul的id
var text = document.getElementById("text");//获取滚动内容的id
var navBoxChild = navBox.children;//获取导航ul的数量
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) {
document.getElementsByClassName('menu')[0].style.cssText = 'position:fixed;top:0px;background: #000;box-shadow:0 2px 3px -1px #000;';
} else {
document.getElementsByClassName('menu')[0].style.cssText = 'position:static;';
}
//当导航与相应文档接触的时候自动切换
//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>
导航固定
var o = document.getElementById("activity");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度
console.log(h)
document.addEventListener('scroll', function (event) {
var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollDistance >= h-95) { // 触发的位置
document.getElementsByClassName('menu')[0].style.cssText = 'position:fixed;top:0px;background: #000;box-shadow:0 2px 3px -1px #000;';
} else {
document.getElementsByClassName('menu')[0].style.cssText = 'position:static;';
}
});
具体项目参考文件1111.zip
