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


});

表格的表头也是一样的道理