JQuery,通过滚动高度改变页面布局

常见效果:

当页面向下滚动至导航栏,导航栏不再消失,而是固定在页面可视范围的顶部。

关键代码:

$(document).ready(function(){
    var navtop=$("#Nav").offset().top;
    $(window).scroll(function(){
        var temp=$(this).scrollTop();
        if(temp>navtop)
            $("#Nav").addClass("navontop");
        else
            $("#Nav").removeClass("navontop");
    });
});

CSS:

.navontop{position:fixed;top:0;left:0;}

导航栏的id是Nav

CSS中,fixed表示固定,但不兼容IE6,虽然可采用expression在IE6中实现相同效果,但由为资源占用严重,不建议这样做。

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏