Sticky header jQuery addClass无效

Question

我正在尝试创建粘性标题，但当我向下滚动jQuery addClass函数不起作用我也尝试过$(this)但它也无法正常工作。我正在尝试在滚动时添加另一个类，但它无法正常工作。我想改变标题的背景color这是我的HTML代码

$(document).ready(function() {

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var objectSelect = $(".myNavigation");
    var objectPosition = objectSelect.offset().top;
    if (scroll > objectPosition) {
      $(this).addClass("active");
    } else {
      $(this).removeClass("active");
    }
  });


});

.active {
  background: #147cc4 !important;
  color: #fff !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md fixed-top navbar-dark mb-4 myNavigation">

  <div class="container">
    <div class="col-md-2">
      <ul class="navbar-nav mr-auto">
        <form class="form-inline navbar-form" role="search">
          <div class="search">

            <span class="fa fa-search"></span>

            <input type="text" class="form-control" placeholder="Search">

          </div>
        </form>
      </ul>
    </div>


    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">

      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="logoFont">Hifzil</a>
        </li>

      </ul>

      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="nav-link">Donate</a>
        </li>

        <li class="nav-item">
          <a class="nav-link">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Sign In</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

这是css类我改变了背景colors

Answer 1

问题： - 在你的情况下，$(this)指的是window而不是.myNavigation。

解决方案： -

$(this).addClass("active");
$(this).removeClass("active");

需要：-

objectSelect.addClass("active");
objectSelect.removeClass("active");

工作片段： - https://jsfiddle.net/7ko4k75t/

Answer 2

条件语句的行为与预期的一样，但考虑使用.addClass()方法和变量objectSelect - 它已经定义了需要类更改的元素（.myNavigation）。

在这种情况下，$(this)的使用不正确，就范围而言，this指的是window方法的选择范围中定义的.scroll()。

代码片段演示：

注意：添加控制台日志记录以演示何时发生状态更改

$(document).ready(function() {

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var objectSelect = $(".myNavigation");
    var objectPosition = objectSelect.offset().top;
    if (scroll > objectPosition) {
      $(objectSelect).addClass("active");
      console.log('this:',$(objectSelect).attr('class'));
    } else {
      $(objectSelect).removeClass("active");
      console.log('this:',$(objectSelect).attr('class'));
    }
  });


});

.active {
  background: #147cc4 !important;
  color: #fff !important;
}

html {
  min-height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md fixed-top navbar-dark mb-4 myNavigation">

  <div class="container">
    <div class="col-md-2">
      <ul class="navbar-nav mr-auto">
        <form class="form-inline navbar-form" role="search">
          <div class="search">

            <span class="fa fa-search"></span>

            <input type="text" class="form-control" placeholder="Search">

          </div>
        </form>
      </ul>
    </div>


    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">

      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="logoFont">Hifzil</a>
        </li>

      </ul>

      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="nav-link">Donate</a>
        </li>

        <li class="nav-item">
          <a class="nav-link">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Sign In</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 3

纯JS的简单解决方案：

var
    head = document.getElementsByClassName('myNavigation')[0];

function stickyHeader() {
    if (window.pageYOffset > 150) {
        head.classList.add('active');
    }
    else if (window.pageYOffset <= 150) {
        head.classList.remove('active');
    }
}

window.addEventListener('scroll', function () {
    stickyHeader();
});