0

ウェブサイトの読み込み時にページの下部に表示され、スクロール時に上に移動するスティッキー ナビゲーション メニューを作成しようとしています。そのナビゲーション メニューは、スクロール中に上部に到達すると、ページの上部に固執する必要があります。今では動作し、固執しています。ただし、ゆっくりスクロールすると問題が発生します。必要以上に上昇し、一部のピクセルが元の場所に戻った後にのみ上昇します。高速スクロール中は、この動作は再現されないことに注意してください。その「オーバースクロール」の原因と、正確に上部に到達したときに動きを止めるための提案は何ですか?

htmlコード

<div class="menu"></div>

CSSコード

body {
    margin: 0;
    padding: 0;
    height: 2000px;
}
.menu {
    position: absolute;
    width: 100%;
    height: 100px;
    background: orange;
    top: auto;
    bottom: 0;
}

.fixed_menu {
    position: fixed;
    top: 0;
    bottom: auto;
}

jqueryコード

var menu_height = $('menu').height();
$(window).scroll(function(e){
    e.preventDefault();
    var window_height = $(window).height();
    var window_scroll = $(window).scrollTop();
    if(window_scroll >= window_height - menu_height){
        $('.menu').addClass("fixed_menu");
    }else{
        $('.menu').removeClass("fixed_menu");
    }
});

jsfiddle の例http://jsfiddle.net/6JZf8/

4

1 に答える 1

3

コードに小さなタイプミスがあります...

var menu_height = $('.menu').height();

を逃しました。クラスメニューを取得するには

見る：

http://jsfiddle.net/6JZf8/1/

于 2013-06-22T22:37:00.683 に答える