Onscroll not applying class

Question

I am trying to add a class to the body when I scroll past a certain point and then remove it when I go behind that certain point but its not applying in real time.

When I refresh the page when I have scrolled past the point the class is added but I want this to do this automatically if anyone could help.

var fixedTops = function() {
    var scroll = $("body").scrollTop();
    if (scroll >= 100) {
        $("body").addClass("navnewclass");
    } else {
        $("body").removeClass("navnewclass");
    }
};

fixedTops();

Answer 1

fixedTops() will only run when the script is loaded. It will not re-run again unless prompted.

You need to tell it to run whenever the page is scrolled; something like this should do the trick:

$("html").scroll(function() { fixedTops(); });

(Please note, untested).

This should tell javascript to run fixedTops() every time html is scrolled.