Code Demon Code Demon - 5 months ago 31
jQuery Question

Add bottom box shadow to the menu on scrollup and scrolldown

I have a menu with this CSS properties:

#header {
width: 100%;
position: fixed;
z-index: 9000;
overflow: auto;
}


So based on the CSS properties above, this element (
#header
) will obviously remain on top regardless of the scrolling. What I'm trying to achieve is on scroll up and scroll down, a bottom box shadow should be added into that element (
#header
) and should be removed once it reaches the default location of that element (
#header
) which is obviously the top-most place of the page.

I'm open to any suggestion and recommendation.

Answer

DEMO

Whenever the page is scrolled we save the current distance from the top of the document in a variable (scroll).

If the current position is greater than 0 we add the class active to #header.

If the current position is equal to 0 we remove the class.

$(window).scroll(function() {     
    var scroll = $(window).scrollTop();
    if (scroll > 0) {
        $("#header").addClass("active");
    }
    else {
        $("#header").removeClass("active");
    }
});

CSS

#header.active {
     box-shadow: 0 0 10px rgba(0,0,0,0.4);   
}