Many websites now have such an effect. When the page scrolls to a certain height, the menu bar will be fixed at the top of the page. In fact, it is to change the value of position. html code: Copy code The code is as follows: <br>.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} <br>.header{height:150px;} <br>#nav{padding :10px;position:relative;top:0;background:black;width:1000px;} <br>a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;} <br> < ;/div> 11111 22222< /a> 33333 44444 55555 <br>window.onload = function(){ <br>menuFixed('nav' ; Code <br><br><br> The code is as follows: </div> <br> <strong>function menuFixed(id){ </strong>var obj = document.getElementById(id); <br>var _getHeight = obj.offsetTop ; <div class="codetitle">window.onscroll = function(){ <span>changePos(id,_getHeight); <a style="CURSOR: pointer" data="93698" class="copybut" id="copybut93698" onclick="doCopy('code93698')">} <u>} </u>function changePos(id,height){ </a>var obj = document.getElementById (id); </span>var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; </div>if(scrollTop < height){ <div class="codebody" id="code93698">obj.style.position = 'relative'; <br> }else{ <br>obj.style.position = 'fixed'; <br>} <br>} <br><br> <br>Finally, it should be noted that this effect is not supported under ie6, because ie6 does not Support position: fixed; <br>PS: These are some effects I wrote casually based on my knowledge of javascript when I was bored.</div>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
