導(dǎo)航跟隨滾動(dòng)條置頂移動(dòng)示例代碼
更新時(shí)間：2013年09月11日 17:44:51 作者：
滾動(dòng)條滾動(dòng)時(shí)如何讓導(dǎo)航置頂移動(dòng)，這種效果已經(jīng)在很多網(wǎng)看到了，所以本文也來實(shí)現(xiàn)一個(gè)，感興趣的朋友可以學(xué)習(xí)下
復(fù)制代碼 代碼如下:
#topmenu{position:absolute;top:100px;background:#4b4a4a;width:100%;margin:0 auto;clear:both;overflow:hidden;z-index:998;left:0}
<script type="text/javascript">
jQuery(document).ready(function() {
var topmenu = jQuery("#topmenu");
var topmenu_top = topmenu.offset().top;
reset_topmenu_top(topmenu, topmenu_top);
jQuery(window).scroll(function() {
reset_topmenu_top(topmenu, topmenu_top);
});
});
function reset_topmenu_top(topmenu, topmenu_top) {
var document_scroll_top = jQuery(document).scrollTop();
if (document_scroll_top > topmenu_top) {
topmenu.css('top', document_scroll_top);
}
if (document_scroll_top <= topmenu_top) {
topmenu.css('top', topmenu_top);
}
}
</script>
效果圖如下：
您可能感興趣的文章:
- C# SetWindowPos窗口置頂使用說明
- jquery實(shí)現(xiàn)標(biāo)簽上移、下移、置頂
- jQuery實(shí)現(xiàn)表格行上移下移和置頂?shù)姆椒?/a>
- jquery實(shí)現(xiàn)的鼠標(biāo)下拉滾動(dòng)置頂效果
- jQuery實(shí)現(xiàn)表格行上下移動(dòng)和置頂效果
- Android ListView實(shí)現(xiàn)仿iPhone實(shí)現(xiàn)左滑刪除按鈕的簡(jiǎn)單實(shí)例
- Android自定義組合控件之自定義下拉刷新和左滑刪除實(shí)例代碼
- Android下拉刷新上拉加載更多左滑動(dòng)刪除
- Android使用SwipeListView實(shí)現(xiàn)類似QQ的滑動(dòng)刪除效果
- Android仿QQ左滑刪除置頂ListView操作
相關(guān)文章
JavaScript數(shù)據(jù)類型轉(zhuǎn)換實(shí)例(其他類型轉(zhuǎn)字符串、數(shù)值型、布爾類型)
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,本文分別介紹了其他類型轉(zhuǎn)為字符串、其他類型轉(zhuǎn)為數(shù)值型以及其他類型轉(zhuǎn)為布爾類型的方法,需要的朋友可以參考下2021-07-07
如何全局重寫小程序Page函數(shù)wx對(duì)象詳解
這篇文章主要給大家介紹了關(guān)于如何全局重寫小程序Page函數(shù)wx對(duì)象的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-08-08
下面小編就為大家?guī)硪黄媪私鈐avascript三元運(yùn)算符。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
使用JS手寫一個(gè)類似?Laravel?驗(yàn)證器的表單驗(yàn)證器
這篇文章主要為大家介紹了使用JS手寫一個(gè)類似?Laravel?驗(yàn)證器的表單驗(yàn)證器實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之命令模式，對(duì)設(shè)計(jì)模式感興趣的同學(xué)，可以參考下2021-04-04
layui獲取選中行數(shù)據(jù)的實(shí)例講解
今天小編就為大家分享一篇layui獲取選中行數(shù)據(jù)的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了js圖片上傳的封裝代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了canvas實(shí)現(xiàn)圖像布局填充功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
createElement與createDocumentFragment的點(diǎn)點(diǎn)區(qū)別小結(jié)
在DOM操作里，createElement是創(chuàng)建一個(gè)新的節(jié)點(diǎn)，createDocumentFragment是創(chuàng)建一個(gè)文檔片段2011-12-12
這篇文章主要介紹了JS仿QQ好友列表展開、收縮功能(第一篇),需要的朋友可以參考下2017-07-07