14

このCSSプロパティを持つメニューがあります:

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

したがって、上記の CSS プロパティに基づいて、この要素 ( #header) は、スクロールに関係なく、明らかに上に残ります。私が達成しようとしているのは、上にスクロールして下にスクロールすることです。下のボックスの影をその要素に追加する必要があり( #header)、その要素のデフォルトの場所に到達したら削除する必要があります( #header)明らかに一番上の場所ですページの。

私はどんな提案や推薦にもオープンです。

4

2 に答える 2

36 

$(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>

JSFミドルバージョン

ページがスクロールされるたびに、ドキュメントの上部からの現在の距離を変数 ( scroll) に保存します。

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

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

于 2013-06-17T19:11:24.963 に答える
3

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

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);
}
于 2013-06-17T19:13:38.997 に答える