導航跟隨滾動條置頂移動示例代碼
更新時間：2013年09月11日 17:44:51 作者：
滾動條滾動時如何讓導航置頂移動，這種效果已經在很多網看到了，所以本文也來實現一個，感興趣的朋友可以學習下
復制代碼 代碼如下:
#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>
效果圖如下：
相關文章
這篇文章主要介紹了JavaScript實現文字與圖片拖拽效果的方法,涉及javascript操作文字與圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JS簡單獲取并修改input文本框內容的方法,結合實例形式分析了JavaScript針對頁面元素的獲取、賦值等相關操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Bootstrap入門書籍之（四）菜單、按鈕及導航的相關資料,需要的朋友可以參考下2016-02-02
本文主要通過幾個實例對js中作用域進行詳細解析，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細介紹了原生JS實現圖片輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章介紹了JavaScript獲取多個數組的交集簡單實例，有需要的朋友可以參考一下2013-11-11
本文，我們將使用 Google 搜索出排名前 10 位的 JavaScript 庫，并對它們逐一進行介紹。2010-04-04
下面小編就為大家?guī)硪黄趶瓦x框demo(分享)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
基于Bootstrap的Java開發(fā)問題匯總（Spring MVC）
這篇文章主要為大家匯總了基于Bootstrap的Java開發(fā)問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
本文這里給大家總結了一些常用的javascript方法，都是些短小精悍的小代碼，提高執(zhí)行效率，這里推薦給大家。2015-02-02