Add/remove class with jquery based on vertical scroll

Question

i need to add class after 1070 i have the code for that and its work great:

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

now i need to add class extrablack in 1070 but remove in 1580 how can i do that? I need the class stay between 1070 and 1580 of website. thanks

if (scroll >= 1070 && scroll < 1580) then add class else remove it (important the else part) — Scaramouche
– Scaramouche, Commented Apr 23, 2018 at 18:20
i need to add class in 1070 and after 1580 remove. this is impossibility? — Vachos
– Vachos, Commented Apr 23, 2018 at 18:37
sorry @Vachos my bad .. I don't know how I saw 1070 bigger then 1580 .. I need to change my Ophthalmologist :-) .. sorry again .. Good Luck — Mohamed-Yousef
– Mohamed-Yousef, Commented Apr 23, 2018 at 20:28

Scaramouche · Accepted Answer · 2018-04-23 18:37:55Z

Is this what you were looking for?

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>

Elroy Jetson · Accepted Answer · 2018-04-23 18:22:59Z

0

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");
        }   
    });
});

edited Apr 23, 2018 at 18:22

answered Apr 23, 2018 at 18:16

Elroy Jetson

9761 gold badge12 silver badges28 bronze badges

2 Comments

Vachos Over a year ago

sorry this doesn't work. this add class but dont remove it.

Elroy Jetson Over a year ago

@Vachos try it now

Collectives™ on Stack Overflow

Add/remove class with jquery based on vertical scroll

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related