Code Demon Code Demon - 10 months ago 48
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 (
) 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 (
) and should be removed once it reaches the default location of that element (
) which is obviously the top-most place of the page.

I'm open to any suggestion and recommendation.



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) {
    else {

     box-shadow: 0 0 10px rgba(0,0,0,0.4);