Aggiungere fondo scatola di ombra per il menu a scrollup e scrolldown

Question

Ho un menu con questa proprietà CSS:

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

Quindi, in base alle proprietà CSS di cui sopra, questo elemento (#header), ovviamente, rimarrà in cima a prescindere lo scorrimento. Quello che sto cercando di ottenere è scorrere verso l'alto e scorrere verso il basso, un'ombra di casella in basso dovrebbe essere aggiunta a quell'elemento (#header) e dovrebbe essere rimossa una volta raggiunta la posizione predefinita di quell'elemento (#header) che è ovviamente il top- gran parte della pagina.

Sono aperto a qualsiasi suggerimento e raccomandazione.

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); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="header">HEADER</div>

JSFiddle version

Ogni volta che la pagina viene fatto scorrere salviamo la distanza attuale dalla parte superiore del documento in una variabile (scroll).

Se la posizione corrente è maggiore di 0, aggiungere la classe active a #header.

Se la posizione corrente è uguale a 0, rimuoveremo la classe.

Answer 2

Creare una classe denominata ombra da aggiungere al div dell'header su 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); 
}