This will remove the class when you scroll back up. Change '100' to whatever you want the scroll value to be.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".initialStyle").addClass("additionalStyle");
} else {
$(".initialStyle").removeClass("additionalStyle");
}
});
Replace 'initialStyle' and 'additionalStyle'.
Here's a full page example:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
div {
height:100px;
}
.test {
background:#0000ff;
}
.test2 {
background:#ff0000;
}
.test3 {
background:#00ff00;
}
.testicles {
background:#000000;
}
</style>
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".test2").addClass("testicles");
} else {
$(".test2").removeClass("testicles");
}
});
</script>
</head>
<body style="height:2000px;margin-top:200px;">
<div class="test" id="test">
</div>
<div class="test2" id="test2">
</div>
<div class="test3" id="test3">
</div>
<div class="test4" id="test4">
</div>
</body>
Comments