div滚动至顶部之后固定的方法

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

效果图片如下：

div滚动至顶部之后固定的方法

滚动到顶端之后：

div滚动至顶部之后固定的方法

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

具体代码见下面：

<script type="application/javascript">

/*导航栏滚动到顶部后fix*/

$(function () {

var elm = $('.nav-bar');

var font = $('.head ul li a');

var curNav = $('#current');

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

//修改背景色

$(elm).css('background', 'black');

$(font).css('color', 'white');

} else { //拉回来

$(elm).css('position', 'relative');

//背景色改回来

$(elm).css('background', 'white');

$(font).css('color', 'black');

}

$(curNav).css('color', 'red');

});

</script>