Now many sites have this effect, when the page is scrolled to a certain height, the menu bar will be fixed at the top of the page. is actually changing the value of position.
HTML code：
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<link rel= "stylesheet" type= "Text/css" href= "Css/base.css" media= "All"/>
<style type= "Text/css" >
. Wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
. header{height:150px;}
#nav {padding:10px;position:relative;top:0;background:black;width:1000px;}
a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
</style>
<body>
<div class= "wrapper" >
<div class= "Header" ></div>
<div id= "NAV" >
<a href= "#" >11111</a>
<a href= "#" >22222</a>
<a href= "#" >33333</a>
<a href= "#" >44444</a>
<a href= "#" >55555</a>
</div>
</div>
</body>
<script type= "Text/javascript" src= "Menufixed.js" ></script>
<script type= "Text/javascript" >
Window.onload = function () {
Menufixed (' Nav ');
}
</script>
menufixed.js Code：
Copy Code code as follows:
function menufixed (ID) {
var obj = document.getElementById (ID);
var _getheight = obj.offsettop;
Window.onscroll = function () {
Changepos (Id,_getheight);
}
}
function Changepos (id,height) {
var obj = document.getElementById (ID);
var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;
if (ScrollTop < height) {
obj.style.position = ' relative ';
}else{
obj.style.position = ' fixed ';
}
}
Finally, it should be explained that the effect is not supported under IE6, because IE6 does not support position:fixed;
PS: This is my idle boring, through their own learning JavaScript knowledge, random write some effects.
