Dodaj dolny cień pole do menu na scrollup i scrolldown

Question

Mam menu Dzięki tej właściwości CSS:

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

więc w oparciu o właściwości CSS powyżej, ten element (#header) będzie oczywiście pozostać na szczycie, niezależnie od przewijanie. Próbuję osiągnąć przewinięcie w górę i przewijanie w dół, cień dolnego pola powinien zostać dodany do tego elementu (#header) i powinien zostać usunięty po osiągnięciu domyślnej lokalizacji tego elementu (#header), co jest oczywiście najwyższym większość miejsca na stronie.

Jestem otwarty na wszelkie sugestie i zalecenia.

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

Gdy strona jest przewijane możemy zapisać aktualną odległość od górnej części dokumentu w zmiennej (scroll).

Jeśli aktualna pozycja jest większa niż 0, dodajemy klasę active do #header.

Jeśli aktualna pozycja jest równa 0, usuwamy klasę.

Answer 2

Utwórz klasę nazywaną cieniem, aby dodać ją do nagłówka div na 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); 
}