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

Create a class called shadow to add to your header div on window.scroll.

http://jsfiddle.net/43aZ4/

var top = $('#header').offset().top;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop(); 
    if (y >= 60) {  $('#header').addClass('shadow'); }
    else { $('#header').removeClass('shadow'); }
  });

.shadow {
    -webkit-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 10px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 10px 5px rgba(50, 50, 50, 0.75);
}