Prevent adding class without browser scroll

Question

This js add class only while Scroll Up the browser page. But problem is after Scroll Up browser to top of the page .darkHeader class are not remove, means i want to remove this class after page Scroll Up to top.

JS

lastScroll = 0;
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();
    if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
    lastScroll = scroll;
});

JSfiddle >>

How to remove .darkHeader class after page has completely scroll Up on top of page/head? How to prevent adding class without browser scrolling?

mpallansch · Accepted Answer · 2015-05-31 17:29:23Z

3

You could add another condition which checks if the scrolling is at the top of the page, and removes the class like this:

    if(scroll === 0){
        $(".nav").removeClass("darkHeader");
    } else if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }

answered May 31, 2015 at 17:29

mpallansch

1,1946 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mpallansch Over a year ago

The dark header is still showing when you scroll back up to the top of the page? What browser are you using? And are you sure you implemented it correctly (here's a forked fiddle: jsfiddle.net/9fbr320y/1 )?

Aariba Over a year ago

woo works, thanks, now i have try it on my site :) on more is it works in IE9? thanks.

Collectives™ on Stack Overflow

Prevent adding class without browser scroll

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related