jquery實現導航欄以及表格表頭滾動時固定功能
今天來實現一個經常會用到的功能,導航欄或者表格的表頭在當有滾動條向下滾動時,依然可以看到這樣可以更清晰的對應數據是什麼數據.本來可以設置導航欄爲position:fixed就可以實現向下滾動時也顯示,但是設計人員要求導航欄佔位置所以這裏不能設置position.
效果圖:
初始狀態: 滾動時:
可以看到 當頁面滾動時,頂部的導航欄 會跟隨頁面一起往下滾動.
實現思路:
用jquery綁定頁面滾動時的事件 如果向下滾動時則把導航欄設置爲position:fixed.在獲取滾動的位置,如果滾動到頂部則把導航欄恢復原狀.
具體代碼:
$(window).bind("scroll", function () {
$("#TopNav").css("position", "fixed");
var scrollNum = $(document).scrollTop();
if(scrollNum==0)
$("#TopNav").removeAttr("style");
});
表格的表頭也是一樣的道理