javascript改變position值實現(xiàn)菜單滾動至頂部后固定
更新時間：2013年01月18日 18:22:13 作者：
現(xiàn)在很多網(wǎng)站都有這樣的一個效果，當(dāng)頁面滾動到一定高度時，菜單欄會固定在頁面頂部;該效果在 ie6 下不支持，因為ie6不支持 position:fixed,效果很不錯，感興趣的朋友可以了解下啊
現(xiàn)在很多網(wǎng)站都有這樣的一個效果，當(dāng)頁面滾動到一定高度時，菜單欄會固定在頁面頂部。其實就是改變 position 的值。
html 代碼：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<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>
</head>
<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>
</html>
<script type="text/javascript" src="menuFixed.js"></script>
<script type="text/javascript">
window.onload = function(){
menuFixed('nav');
}
</script>
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：這是本人閑著無聊，通過自己所學(xué)的 javascript 知識，隨意寫的一些效果。
html 代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<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>
</head>
<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>
</html>
<script type="text/javascript" src="menuFixed.js"></script>
<script type="text/javascript">
window.onload = function(){
menuFixed('nav');
}
</script>
menuFixed.js 代碼：
復(fù)制代碼 代碼如下:
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：這是本人閑著無聊，通過自己所學(xué)的 javascript 知識，隨意寫的一些效果。
相關(guān)文章
本文主要介紹了javascript中“this”的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
EasyUi中的Combogrid 實現(xiàn)分頁和動態(tài)搜索遠(yuǎn)程數(shù)據(jù)
jquery easyui中的combogrid比較特殊，算是combo和grid的組合，combogrid結(jié)合一個可編輯的文本框和下拉數(shù)據(jù)網(wǎng)格面板，可以讓用戶迅速找到并選擇，又可以進(jìn)行搜索，展示與當(dāng)前輸入的字符相匹配的數(shù)據(jù)。下面給大家介紹EasyUi中的Combogrid 實現(xiàn)分頁和動態(tài)搜索遠(yuǎn)程數(shù)據(jù)2016-04-04
await/async 是 ES7 最重要特性之一，它是目前為止 JS 最佳的異步解決方案了。這篇文章主要介紹了JavaScript中的await/async的作用和用法的相關(guān)資料2016-10-10
webpack.DefinePlugin與cross-env區(qū)別詳解
這篇文章主要介紹了webpack.DefinePlugin與cross-env區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了p5.js碼繪“跳動的小正方形”，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
傳統(tǒng)的web開發(fā)實現(xiàn)登陸功能,一般的做法是輸入賬號密碼、或者輸入手機(jī)號及短信驗證碼進(jìn)行登錄,下面這篇文章主要給大家介紹了關(guān)于微信小程序賬號密碼登入和傳值的實現(xiàn)方法,需要的朋友可以參考下2022-04-04
JavaScript+canvas實現(xiàn)框內(nèi)跳動小球
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實現(xiàn)框內(nèi)跳動小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了處理JavaScript值為undefined的7個小技巧,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
Bootstrap基本樣式學(xué)習(xí)筆記之標(biāo)簽(5)
這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之標(biāo)簽基本樣式的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
javascript 驗證碼生成代碼 推薦學(xué)習(xí)
非常不錯的用javascript實現(xiàn)的驗證碼實現(xiàn)代碼。2009-07-07