div當(dāng)滾動到頁面頂部的時候固定在頂部實例代碼
更新時間：2013年05月27日 17:00:11 作者：
使用Javascript實現(xiàn)了滾動頁面時，DIV到達(dá)頂部時固定在頂部。在IE下效果有點閃，具體代碼如下，感興趣的朋友可以參考下哈
本示例使用Javascript實現(xiàn)了滾動頁面時，DIV到達(dá)頂部時固定在頂部。在IE下效果有點閃，效果網(wǎng)址：http://www.keleyi.com/keleyi/phtml/fixdiv.htm
下面是代碼：
<body style="margin:0px;">
<div style="height:300px;background:#e0e0e0"></div>
<div id="fixedMenu_keleyi_com" style="background:#ffffff;width:100%;"><ul><li><a
target="_blank">.NET</a></li>
<li><a target="_blank">Javascript</a></li>
<li><a target="_blank">jQuery</a></li>
<li><a target="_blank">C#</a></li>
<li><a target="_blank">其他</a></li>
<li><a target="_blank">首頁</a></li></ul>
</div>
<div style="height:2600px;background:#999"></div>
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
var ie6 = document.all;
var dv = $('#fixedMenu_keleyi_com'), st;
dv.attr('otop', dv.offset().top); //存儲原來的距離頂部的距離
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st > parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed屬性，所以只能靠設(shè)置position為absolute和top實現(xiàn)此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
});
</script>
</body>
下面是代碼：
復(fù)制代碼 代碼如下:
<body style="margin:0px;">
<div style="height:300px;background:#e0e0e0"></div>
<div id="fixedMenu_keleyi_com" style="background:#ffffff;width:100%;"><ul><li><a
target="_blank">.NET</a></li>
<li><a target="_blank">Javascript</a></li>
<li><a target="_blank">jQuery</a></li>
<li><a target="_blank">C#</a></li>
<li><a target="_blank">其他</a></li>
<li><a target="_blank">首頁</a></li></ul>
</div>
<div style="height:2600px;background:#999"></div>
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
var ie6 = document.all;
var dv = $('#fixedMenu_keleyi_com'), st;
dv.attr('otop', dv.offset().top); //存儲原來的距離頂部的距離
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st > parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed屬性，所以只能靠設(shè)置position為absolute和top實現(xiàn)此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
});
</script>
</body>
您可能感興趣的文章:
相關(guān)文章
Electron?自定義窗口桌面時鐘實現(xiàn)示例詳解
這篇文章主要為大家介紹了Electron?自定義窗口桌面時鐘實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了如何使用html2Canvas打印高清PDF的效果，文中的示例代碼講解詳細(xì)，具有一定的參考價值，需要的可以了解一下2023-07-07
如何使用JavaScript快速創(chuàng)建一個1到100的數(shù)組
平時寫代碼時,我們會生產(chǎn)一些測試用的數(shù)組數(shù)據(jù),比如[1,100]的數(shù)組值,下面這篇文章主要給大家介紹了關(guān)于如何使用JavaScript快速創(chuàng)建一個1到100數(shù)組的相關(guān)資料,需要的朋友可以參考下2022-08-08
JavaScript 變量,數(shù)據(jù)類型基礎(chǔ)實例詳解【變量、字符串、數(shù)組、對象等】
這篇文章主要介紹了JavaScript 變量,數(shù)據(jù)類型基礎(chǔ),結(jié)合實例形式詳細(xì)分析了JavaScript變量聲明、字符串、數(shù)組、對象等基本使用方法與操作注意事項,需要的朋友可以參考下2020-01-01
在javascript中隨機(jī)數(shù) math random如何生成指定范圍數(shù)值的隨機(jī)數(shù)
本篇文章給大家介紹在javascript中隨機(jī)數(shù)math random如何生成指定范圍數(shù)值的隨機(jī)數(shù)，由于math.random生成了一個偽隨機(jī)數(shù)，之后還要經(jīng)過我們的后期處理。對隨機(jī)數(shù)math random感興趣的朋友一起了解了解吧2015-10-10
javascript?Echart可視化學(xué)習(xí)
這篇文章主要為大家介紹了Echart可視化學(xué)習(xí)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
FireFox與IE 下js兼容觸發(fā)click事件的代碼
FireFox與IE 下js兼容觸發(fā)click事件 ,對于需要兼容這兩者的朋友，就需要參考下下面的代碼了2008-11-11
這篇文章主要為大家分享了js微信應(yīng)用場景之微信音樂相冊案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了js仿微信搶紅包功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
最近公司和第三方材料供應(yīng)商對接開發(fā)了物資集采平臺,其中有個功能需求需要展示數(shù)百張材料信息圖片,有時頁面會出現(xiàn)卡頓的情況,并使用了圖片懶加載的方式進(jìn)行了優(yōu)化,下面把方法分享給大家一起學(xué)習(xí),感興趣的小伙伴跟著小編一起來看看吧2024-12-12