Add bottom box shadow to the menu on scrollup and scrolldown

Question

I have a menu with this CSS properties:

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


        

Answer 1

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

body {
    height: 2000px;
    margin: 0;
}

body > #header{position:fixed;}

#header {
    width: 100%;
    position: fixed;
    z-index:9000;
    overflow: auto;
    background: #e6e6e6;
    text-align: center;
    padding: 10px 0;
    transition: all 0.5s linear;
}

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

HEADER

JSFiddle version

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.