は、私は、このCSSプロパティとメニューを持ってscrollupとscrolldown

Question

上のメニューに下のボックスシャドウを追加します。

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

したがって、上記のCSSプロパティに基づいて、この要素（#header）が明らかに関わらずの上に残りますスクロール私が達成しようとしているのはスクロールアップとスクロールで、ボトムボックスの影をその要素（）に追加し、その要素のデフォルト位置（#header）に達すると削除する必要があります。ページのほとんどの場所。

私はいかなる提案や推奨にも開放しています。

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

ページは、我々は、変数（scroll）における文書の先頭から現在までの距離を保存スクロールされるたびに。

現在の位置が0より大きい場合、クラスactiveを#headerに追加します。

現在の位置が0の場合、クラスが削除されます。

Answer 2

shadowというクラスを作成して、window.scrollのヘッダーdivに追加します。

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