javascript - 在使用 jquery 滚动时，对 div 元素的类更改没有实时响应

Question

我在这里阅读了很多答案并尝试应用它们，但它对我的情况不起作用。我找不到以下代码出了什么问题(这只是我面临的问题的一个示例):-

 var header = $(".top-navigation");
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 100) {
    header.addClass("top-navigtion1").removeClass("top-navigation");
  } else {
    header.removeClass("top-navigation1").addClass("top-navigation";
  }
});

 .container {
	    width: 600px;
	    height: 1500px;
	    background-color: #000000;
    }
    .top-navigation {
	    width: 600px;
	    height: 100px;
	    position: fixed;
	    background-color:transparent;
	    z-index: 1501 ;
        color: #fff;
    }
    .top-navigation1 {
	    width: 500px;
	    height: 100px;
	    position:relative;
	    background-color: 'blue';
	    z-index: 1501;
    }

<div class="container">
  <div class="top-navigation">
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 1

请检查这是否适合您。 Fiddle

代码

<header class="clearHeader"></header>
<div class="wrapper"></div>

CSS:

.clearHeader{
 height: 200px; 
 background-color: rgba(107,107,107,0.66);
 position: fixed;
 top:200;
 width: 100%;
 }
 .darkHeader {height: 100px;}
 .wrapper {
  height:2000px;
 }

JQuery:

$(window).scroll(function() {    
  var scroll = $(window).scrollTop();
  if (scroll >= 500) {
    $(".clearHeader").addClass("darkHeader");
  }
  else {
         $(".clearHeader").removeClass("darkHeader");
  }
});