現(xiàn)在很多網(wǎng)站都有這樣的一個效果，當頁面滾動到一定高度時，菜單欄會固定在頁面頂部。其實就是改變 position 的值。

html 代碼：

.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;}

11111

22222

33333

44444

55555

window.onload = function(){

menuFixed('nav');

}

menuFixed.js 代碼：

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';

}

}

最后需要說明的是，該效果在 ie6 下不支持，因為 ie6 不支持 position:fixed;

PS：這是本人閑著無聊，通過自己所學的 javascript 知識，隨意寫的一些效果。

總結

以上是生活随笔為你收集整理的html滚动菜单置顶,javascript改变position值实现菜单滚动至顶部后固定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。