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

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");
        }
    })
});

谢谢

阅读 2.7k
评论 2015-11-23 提问
    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");
            }
        })
    });
    评论 赞赏 2015-11-23

      附上经过@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>
      评论 赞赏 2015-11-23
        撰写回答

        登录后参与交流、获取后续更新提醒