js 设置导航固定

最新推荐文章于 2024-09-09 17:00:48 发布

weixin_34211761

最新推荐文章于 2024-09-09 17:00:48 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ry123/p/4273314.html

本文介绍了一种使用JavaScript和jQuery实现网页中导航栏固定效果的方法。当用户滚动页面时，导航栏会根据滚动位置自动变为固定显示。文章通过具体代码展示了如何监听窗口滚动事件，并根据当前滚动位置调整导航栏的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="nav">
....
</div>

function Add_Data() {
    var top = $("#header-navbar").offset().top;
    var scrolla = $(window).scrollTop();
    var cha = parseInt(top) - parseInt(scrolla);
    if (cha <= 0) {
        $("#header-navbar").addClass("navbar-fixed-top");
    }
    if (parseInt(scrolla)== 0) {
        $("#header-navbar").removeClass("navbar-fixed-top");
    }
};

//页面加载
$(function() {
    //设置头部导航固定
    $(window).scroll(Add_Data);
});