0

アニメーション化されたスティッキー ヘッダーに取り組んでいます。特定のポイントの下にスクロールすると、ヘッダーが上からスライドインし、ポイントの上に戻るまで固定されたままになります。

これが jsfiddle です。slideUP のコメントを削除すると、正常に動作します。

http://jsfiddle.net/rkr2/Dk8UA/1/

HTML:

<div class="nav-container">
    <div class="nav">
        <div id="bad"> </div>
    </div>
</div>
<p> long content here </p>

CSS:

.f-nav{
     z-index: 9999;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
}

#bad{
     width: 100%;
     height: 50px;
     background-color: yellow;
}

JS:

var nav=$('.nav-container');
$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        nav.addClass('f-nav');
        nav.slideDown('slow');
        $('#bad').css('background-color','red');
    } else {
        nav.removeClass('f-nav');
        //nav.slideUp('slow');
        $('#bad').css('background-color','yellow');
    }
});

なぜこうなった？

4

1 に答える 1

2

jQuery slideDown は、非表示の要素で動作することを意図しています。要素が既に表示されている場合、効果は表示されません。この問題を回避する.hide()には、要素の前に追加し.slideDownます。このように: http://jsfiddle.net/Dk8UA/3/

を追加するときに機能する理由.slideUpは、slideUp が要素を非表示にするためです。

更新: if 条件を追加して、スクロールするたびにアニメーションを実行しないように、nav に既にクラスがあるかどうかを確認できます。

var nav = $('.nav-container');
$(window).scroll(function () {
    if ($(this).scrollTop() > 200) {
        if (!nav.hasClass('f-nav')) {
            nav.addClass("f-nav");
            nav.hide();
            nav.slideDown("slow");
            $('#bad').css('background-color', 'red');
        }
    } else {
        nav.removeClass("f-nav");
        // nav.slideUp("slow");
        $('#bad').css('background-color', 'yellow');
    }
});

http://jsfiddle.net/Dk8UA/13/

于 2013-05-02T16:41:08.367 に答える