页面滚动时导航栏固定(增加class)?我这段代码咋就不行呢?css没有问题

小小的PHP能干啥
  • 181

css已经设置好没问题,审查元素手动在#head-navbar的class里增加bg-header-fixed后效果没有问题。
就是不知道这个js代码该怎么弄了,就是不对,应该是页面滚动10就会增加class,可是没有效果。
请教哪位能根据这个代码,用最简短的代码给改下。搜索了好长时间也没弄成。谢谢

$(document).ready(function () {
    var navtop = $("head-navbar").offset().top;
    $(window).scrollTop(function () {
        var t = $(window).scrollTop();
        if (t > navtop) {
            $("head-navbar").addClass("bg-header-fixed");
        } else {
            $("head-navbar").removeClass("bg-header-fixed");
        }
    })
});

谢谢

回复
阅读 3.7k
2 个回答
//第三行写错了  应该是监听scroll事件 ,而不是scrollTop
$(document).ready(function () {
    var navtop = $("head-navbar").offset().top;
    $(window).scroll(function () {
        var t = $(window).scrollTop();
        if (t > navtop) {
            $("head-navbar").addClass("bg-header-fixed");
        } else {
            $("head-navbar").removeClass("bg-header-fixed");
        }
    })
});

附上经过@nightire 指点后小白我亲测可用代码,相关CSS样式设置仅供参考。

/*
 页面滚动时导航栏固定(增加class)
 */
<script>
$(document).ready(function () {
    $(window).on('scroll', function () {
        var t = $(window).scrollTop();
        if (t > 10) {
            $("#head-navbar").addClass("bg-header-fixed");
        } else {
            $("#head-navbar").removeClass("bg-header-fixed");
        }
    })
});
</script>
<style>
.bg-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background-color: rgba(216, 214, 176, 0.9) !important;
}
</style>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏