Hi all,
My situation is:
I have added some jQuery code on this page to add and remove classes when the vertical scroll gets to a certain amount of pixels.
What I wanted to do was add a class to a div but remove it when the next div is active but the coding I have doesn’t exactly do that (well it kind of does).
When a user reaches the bottom of the page and scrolls back to the top, the classes are added again. Is there a way I can turn off classes for good?
I hope I explained that clearly.
Code I am currently using:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100 && scroll < 269) {
$("#left1").addClass("blue1", 1000);
$("#cLeft1").addClass("blue2", 1000);
}
if (scroll >= 270 && scroll <= 439) {
$("#right1").addClass("blue1", 1000);
$("#cRight1").addClass("blue2", 1000);
$("#left1").removeClass("blue1", 1000);
$("#cLeft1").removeClass("blue2", 1000);
}
if (scroll >= 440 && scroll <= 589) {
$("#left2").addClass("blue1", 1000);
$("#cLeft2").addClass("blue2", 1000);
$("#right1").removeClass("blue1", 1000);
$("#cRight1").removeClass("blue2", 1000);
}
if (scroll >= 590 && scroll <= 739) {
$("#right2").addClass("blue1", 1000);
$("#cRight2").addClass("blue2", 1000);
$("#left2").removeClass("blue1", 1000);
$("#cLeft2").removeClass("blue2", 1000);
}
if (scroll >= 740 && scroll <= 889) {
$("#left3").addClass("blue1", 1000);
$("#cLeft3").addClass("blue2", 1000);
$("#right2").removeClass("blue1", 1000);
$("#cRight2").removeClass("blue2", 1000);
}
if (scroll >= 890 && scroll <= 1039) {
$("#right3").addClass("blue1", 1000);
$("#cRight3").addClass("blue2", 1000);
$("#left3").removeClass("blue1", 1000);
$("#cLeft3").removeClass("blue2", 1000);
}
if (scroll >= 1040 && scroll <= 1189) {
$("#left4").addClass("blue1", 1000);
$("#cLeft4").addClass("blue2", 1000);
$("#right3").removeClass("blue1", 1000);
$("#cRight3").removeClass("blue2", 1000);
}
if (scroll >= 1190 && scroll <= 1339) {
$("#right4").addClass("blue1", 1000);
$("#cRight4").addClass("blue2", 1000);
$("#left4").removeClass("blue1", 1000);
$("#cLeft4").removeClass("blue2", 1000);
}
});
<div id="left1">
<h2>Deliver WOW Through Service</h2>
<div id="cLeft1">
<p>1</p>
</div>
</div>
<div id="right1">
<h2>Embrace and Drive Change</h2>
<div id="cRight1">
<p>2</p>
</div>
</div>
<div id="left2">
<h2>Create Fun and A Little Weirdness</h2>
<div id="cLeft2">
<p>3</p>
</div>
</div>
<div id="right2">
<h2>Be Adventurous, Creative, and Open-Minded</h2>
<div id="cRight2">
<p>4</p>
</div>
</div>
<div id="left3">
<h2>Pursue Growth and Learning</h2>
<div id="cLeft3">
<p>5</p>
</div>
</div>
<div id="right3">
<h2>Build Open and Honest Relationships With Communication</h2>
<div id="cRight3">
<p>6</p>
</div>
</div>
<div id="left4">
<h2>Build a Positive Team and Family Spirit</h2>
<div id="cLeft4">
<p>7</p>
</div>
</div>
<div id="right4">
<h2>Do More With Less</h2>
<div id="cRight4">
<p>8</p>
</div>
</div>
I don’t know too much about jQuery so let me know if there is a better / short way to code this up.
Cheers.
Al.