removeClass不工作

Question

我希望removeClass什么时候scrolltop超过200px.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  console.log(scroll);
  if (scroll >= 100 || scroll <= 200) {
    $(".clearHeader").addClass("darkHeader");
  } else {
    $(".clearHeader").removeClass("darkHeader");
  }
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<header class="clearHeader">
</header>

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

Answer 1

你需要使用&&而不是||

if(scroll >= 100 && scroll <= 200)
    $(".clearHeader").addClass("darkHeader");
}
else{
    $(".clearHeader").removeClass("darkHeader");
}

这也可以用来实现 toogleClass()

$(".clearHeader").toggleClass("darkHeader", scroll >= 100 && scroll <= 200);

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  $(".clearHeader").toggleClass("darkHeader", scroll >= 100 && scroll <= 200);
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<header class="clearHeader">
</header>

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