jquery實現導航欄以及表格表頭滾動時固定功能

                     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");


});

表格的表頭也是一樣的道理

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章