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>

Answer 2

1- 请始终使用 toggleClass() 而不是删除和添加...它需要更少的内存 + 更少的代码... http://api.jquery.com/toggleclass/

2-如果你想在特定条件下做某事，请始终使用“&&”。这显示了它是如何工作的： && http://www.w3schools.com/js/tryit.asp?filename=tryjs_comparison_and

removeClass 不工作

removeClass in not working

html

jquery

scrolltop