Change font color on scroll

Question

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 1

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.

Change font color on scroll

Question

1 answers

solution1
2 ACCPTED 2017-09-28 23:57:06

Change font color on scroll

Question

1 answers

solution1 2 ACCPTED 2017-09-28 23:57:06

solution1
2 ACCPTED 2017-09-28 23:57:06