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()方法的选择器范围。

代码段示范：

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

＆＃13;

＆＃13;

$(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'));
    }
  });


});

＆＃13;

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

html {
  min-height: 1000px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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