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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在我需要在1070添加类extrablack但在1580删除我该怎么办？我需要课程停留在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>

Answer 2

jQuery( document ).ready(function( $ ) {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 1070 && scroll <= 1580) {
          $(".header-main").removeClass("extrablack");
          return;
        }

        if (scroll >= 1070) {
          $(".header-main").addClass("extrablack");
        }   
    });
});