CODEWITHSUNDEEP
jqueryclassscroll
dungey_140
dungey_140

Reputation: 2792

Remove/Add Class on window scroll

I have various elements within my site that have the class "active". This is set as default and I want to remove the class as soon as a user scrolls down the page, but also reinstate the class upon returning to the top of the page (both of which the below code achieves with a 10px delay).

In addition to this, if a user manually adds the "active" class by clicking #sidebarToggle, the "active" class is instantly removed upon scrolling, ignoring the 10px delay specified in the code.

If anybody can offer any assistance on either of the above issues it would be appreciated. Thank you.

    $(window).scroll(function(){
    if($(window).scrollTop()>10) {
        $("#sidebar").removeClass("active");
        $("#sidebarToggle").removeClass("active");
    }
    else {
        $("#sidebar").addClass("active");
        $("#sidebarToggle").addClass("active");
    }
    });

Upvotes: 0

Views: 769

Answers (1)

Pik_at
Pik_at

Reputation: 1457

I think you must just toggle class of one parent element to focus childs element here, like body tag and apply "active" behavior by this as:

body.active #one {}
body.active #two {}
body.active #three {}

Then on Javascript you just need to toggle class one element (body) and verify if active classe's is not already apply like:

$(window).scroll(function(){
    if($(window).scrollTop() > 100 && $('body').hasClass('active')) {
        $('body').removeClass("active");
    } else if(!$('body').hasClass('active')) {
         $('body').addClass("active");
    }
});

Adapat as your convenience.

Upvotes: 1

Related Questions