导航条固定
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>网站logo</h1>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<div id="nav">
导航条
</div>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
</body>
</html>
css部分
<style type="text/css">
#nav {
background: red;
height: 40px;
line-height: 40px;
}
h1 {
height: 100px;
}
.fixed {
position: fixed;
top: 0px;
width: 100%;
}
</style>
js部分
<script>
window.onload = function (){
//得到id
var nav = document.getElementById("nav");
//得到元素离顶部实际的距离
var ot = nav.offsetTop;
window.onscroll = function (){
//获取元素卷上去的高度（元素与顶部的距离）
var t = document.documentElement.scrollTop;
if(t >= ot) //卷上去的高度>=元素离顶部实际的距离，将相应的导航条固定
{
nav.className = "fixed"
}
else{ //卷上去的高<元素离顶部实际的距离,将导航条释放到原来的位置
nav.className = "";
}
}
}
</script>
运行效果
2416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
