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)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)彈性導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
JavaScript中出現(xiàn)了一個以前沒學(xué)過的概念——閉包。何為閉包？從表面理解即封閉的包，與作用域有關(guān)。所以，說閉包以前先說說作用域2012-06-06
這篇文章主要介紹了JavaScript中對象介紹,本文直接用實例講解對象的創(chuàng)建、刪除等操作,并總結(jié)了Object屬性、Property屬性,需要的朋友可以參考下2014-12-12
這篇文章主要給大家介紹了關(guān)于如何通過一次報錯詳細(xì)談?wù)凱oint事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05
下面小編就為大家?guī)硪黄狫S中BOM相關(guān)知識點總結(jié)(必看篇)。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
這篇文章主要介紹了微信小程序的部署方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在Google 地圖上實現(xiàn)做的標(biāo)記相連接
這篇文章主要介紹了在Google 地圖上實現(xiàn)做的標(biāo)記相連接,需要的朋友可以參考下2015-01-01
基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【六】對話框及提示框的處理和優(yōu)化
這篇文章主要介紹了基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【六】對話框及提示框的處理和優(yōu)化的相關(guān)知識，主要對比說明在Bootstrap開發(fā)中用到的這些技術(shù)要點，對此文感興趣的朋友一起學(xué)習(xí)吧2016-05-05
原生js實現(xiàn)復(fù)制對象、擴(kuò)展對象 類似jquery中的extend()方法
jq的extend()方法能很方便的實現(xiàn)擴(kuò)展對象方法，這里要實現(xiàn)的是：原生js實現(xiàn)復(fù)制對象，擴(kuò)展對象，類似jq中的extend()方法,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了js防止DIV布局滾動時閃動的解決方法,通過js的window.requestAnimationFrame來解決這一問題,非常具有實用價值,需要的朋友可以參考下2014-10-10