Add/remove class with jquery based on vertical scroll?

Add/remove class with jquery based on vertical scroll?

 

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     //>=, not <=
    if (scroll >= 500) {
        //clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
});

Also, by removing the clearHeader class, you’re removing the position:fixed; from the element as well as the ability of re-selecting it through the $(“.clearHeader”) selector. I’d suggest not removing that class and adding a new CSS class on top of it for styling purposes.

And if you want to “reset” the class addition when the users scrolls back up:

 

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".clearHeader").addClass("darkHeader");
    } else {
        $(".clearHeader").removeClass("darkHeader");
    }
});

edit: Here’s version caching the header selector – better performance as it won’t query the DOM every time you scroll and you can safely remove/add any class to the header element without losing the reference:

 

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

1,170 total views, 3 views today

Loading Facebook Comments ...

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Enter the captcha code *

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.

Coupon Code "HAPPY10" - Get Discounts upto 90% + 10% off on Purchase of themes/templates and Plugins