Bartosz Mazurek Bartosz Mazurek -3 years ago 139
CSS Question

Change font color on scroll

I'm trying to change the background and font color by class switching:

HTML

<body>
<div class="back">
<h1>TEST<br>TEST</h1>
</div>
<div class="sidebar">TEST TEST TEST</div>
</body>


JS

$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 500) {
$("body").addClass("changeColor");
$("back h1").addClass("changeColortext");
}
else {
$("body").removeClass("changeColor");
$("back h1").removeClass("changeColortext");
}
});
});


changeColour and changeColortext are styles with just different colour and background values like this:

CSS

.changeColortext {
color: #B63E3E;
}


While it works perfectly for changing the background, the font color never changes. What am I doing wrong?

Thanks

Answer Source

Can you post your HTML markup? I suspect without looking at it that you meant to do

$(".back h1").removeClass("changeColortext");

Notice the period before back, which denotes you are looking for a class. Would need to use # if it is an ID.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download