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