javascript - 基于垂直滚动使用jquery添加/删除类

Question

我需要在 1070 之后添加类，我有代码并且它的工作很棒:

jQuery( document ).ready(function( $ ) {
	$(window).scroll(function() {
	    var scroll = $(window).scrollTop();
      
	    if (scroll >= 1070) {
		$(".header-main").addClass("extrablack");
	    } else {
		$(".header-main").removeClass("extrablack");
	    }
	});
});

现在我需要在 1070 中添加 extrablack 类，但在 1580 中删除，我该怎么做？我需要类(class)保持在网站的 1070 到 1580 之间。谢谢

Answer 1

这是您要找的吗？

jQuery( document ).ready(function( $ ) {
	$(window).scroll(function() {
	    var scroll = $(window).scrollTop();
      
	    if (scroll >= 1070 && scroll < 1580) {
		$(".header-main").addClass("extrablack").text(scroll);
	    } else {
		$(".header-main").removeClass("extrablack").text(scroll);
	    }
	});
});

.header-main{
  position: fixed;
  width: 100%;
  height: 100px;
  background: lightgray;
  color: white;
  text-align: center
}

.header-main.extrablack{
  background: black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-main"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>