div滚动至顶部后固定在顶部

洪七公

前言

在浏览网页的时候，经常会看到这种效果：导航栏向上滚动到浏览器顶部之后就固定在顶部不再往上，而向下滚动回来的时候又跟着原来的布局下去

实现的方式可以是通过jquery注册滚动事件，在事件中判断导航栏到顶部的距离，如果小于等于0则将导航栏的css样式中的position设置为fixed，并且改变一下颜色等样式（可选）。如果大于0则回复原来的样式。

<script type="application/javascript">
    /*导航栏滚动到顶部后fix*/
    $(function () {
        var elm = $('.nav-bar');
        var startPos = $(elm).offset().top;
        $.event.add(window, "scroll", function () {
            var p = $(window).scrollTop();
            if ((p) > startPos) {  //到顶部
                $(elm).css('position', 'fixed');
                $(elm).css('top', '0px');
            
            } else { //拉回来
                $(elm).css('position', 'relative');
            }
        });
    });
</script>