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:

Code:
$(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);
    }
});
HTML Code:
<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.