0

ユーザーが少し下にスクロールすると、サイド ナビゲーションを表示するためにjQuery ウェイポイントに依存している 1 ページのサイトで作業しています。

現在、メニューは正しく表示されていますが、ページの上部にメイン ナビゲーションがあるため、ユーザーがスクロールして上部に戻ると、メニューを再び非表示にする必要があります。

HTML:

<div id="side-nav" style="opacity: 0; ">
    <ul class="cf">
        <li><a href="#top">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#events">Events</a></li>
        <li><a class="last" href="#stay">Stay</a></li>
    </ul>
</div>

JS:

$(function () {
    $('#side-nav').css('opacity', 0);
    $('#side-nav').waypoint(function () {
        $('#side-nav').animate({
            opacity: 1
        }, 'slow');
    }, {

    });
});

フィドル: http://jsfiddle.net/GK6Mf/

どんな助けでも大歓迎です。

4

2 に答える 2

0

この他の投稿を使用すると、スクロールバーがどの位置にあるかを判断する方法を学ぶことができます。そこから、必要な領域にあるときにサイドナビゲーションを非表示/表示できます。

jQueryでウィンドウの高さとスクロール位置を決定するにはどうすればよいですか?

于 2013-09-10T19:55:45.040 に答える
0

ウェイポイントでコールバックに渡されたパラメーターを使用し、directionそのパラメーターの値が「下」か「上」かに応じて適切な不透明度にフェードできます。

$('#side-nav').css('opacity', 0);
$('#side-nav').waypoint(function (direction) {
    $('#side-nav').animate({
        opacity: direction === 'down' ? 1 : 0
    }, 'slow');
});
于 2013-09-13T21:18:16.420 に答える