基于滚动

Question

所以基本上我想在用户向下滚动一点并向其添加另一个类之后从header中删除该类。试图找出最简单的方法，但我不能使它在这里工作是代码

$(function() {
    var $sectionBox = $(".J_section-box"),
    $navbarBox = $(".J_nav-bar-con"),
    navHeight = $(".J_nav-bar-con").height();
    $(window).on("scroll", function() {
        $(window).scrollTop() >= $sectionBox.offset().top - navHeight ? $navbarBox.addClass("J_fixNavbar") : $navbarBox.removeClass("J_fixNavbar")
    });
});

Answer 1

为简单起见，我建议使用toggleClass，这样可以让它更容易维护。

＆＃13;

＆＃13;

$(function() {
    var $navbarBox = $(".J_nav-bar-con");
    var navHeight = $(".J_nav-bar-con").height();

    $(window).on("scroll", function() {
        $navbarBox.toggleClass("J_fixNavbar", $(this).scrollTop() >= $(".J_section-box").offset().top - navHeight);
    });
});

＆＃13;

.content {
  width: 100%;
  height: 10000px;
}

.J_nav-bar-con {
  width: 100%;
  height: 100px;
  background: gray;
  position: fixed;
  top: 0;
}

.J_section-box {
  width: 100%;
  height: 100px;
  margin-top: 200px;
}

.J_fixNavbar {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="J_nav-bar-con"></div>
<div class="J_section-box"></div>
<div class="content"></div>

＆＃13;

＆＃13;

＆＃13;