0 
$(document).scroll(function () {
    var y = $(this).scrollTop();

    if (y > 397) {
        $('#aboutNav.fixed').fadeIn(500);   
    } else {
        $('#aboutNav.fixed').hide();
    }
});

ご覧のとおり、これは固定ナビゲーションを示しています。CSSは問題なく、ポジショニングは素晴らしいです。ただし、ナビゲーションが 397px より上に表示されるようにしたいのですが、これで問題ありません。

ただし、スクロールを開始するとナビゲーションがフェードインするようにします。

.fadeIn(500);

ユーザーが停止してコンテンツなどを見始めたら、要素をフェードアウトさせたい

.delay(3000).fadeOut(350);

これは、最初の if ステートメント内で if ステートメントを実行することによって実行できるものだと思います。ただし、ユーザーがスクロールしているかどうかを確認するスクリプトと、上記の作業スクリプトが衝突しているようです。

アイデア、誰か？

4

2 に答える 2

2

Kierchonの答えを少し拡張します。

ユーザーがいつスクロールを終了したか (つまり、「スクロール終了」のイベントがない) を知る実際の方法がないため、デバウンスと呼ばれるイベント遅延メソッドを使用する必要があります。

デバウンスとは、基本的に、将来何らかのコード (関数) を実行するためにタイムアウトを設定することです。デバウンスされた関数を呼び出すイベントが再度呼び出された場合は、タイムアウトをクリアしてリセットし、イベントが最終的に呼び出されなくなるまでこれを繰り返します。このメソッドは、繰り返し発生するイベント (スクロールやサイズ変更など) を防止して、最後のイベントが発生し、遅延 (デバウンス) コードが最終的に実行された後にのみ実行するようにします。

これは、 JSでのデバウンス メソッドの使用に関する素晴らしい記事です。

あなたが必要なものを理解している限り（私はそうしていると思います）-これはいくつかの実用的なコードを含むJSBinです

于 2013-11-14T18:26:14.067 に答える
2

私があなたを正しく理解していれば。ナビゲーションが 397px を超えており、スクロールしている場合にのみフェードインする必要があります...したがって、この関数はそれを行います。私があなたの質問を誤解した場合は、コメントで明確にしてください

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));//Lets the timer know were scrolling

    //Hide/Show nav based on location
    var y = $(this).scrollTop();
    if (y > 397) {
        $('#aboutNav.fixed').fadeIn(500);   
    } else {
        $('#aboutNav.fixed').hide();
    }

    //TimeOut function that is only hit if we havent scrolled for 3 Seconds
    //In here is where you fade out the nav
    $.data(this, 'scrollTimer', setTimeout(function() {    
        $('#aboutNav.fixed').fadeOut();
        console.log("Haven't scrolled in 3s!");
    }, 3000));
});

コメントに基づく1月23日更新

$(document).ready()これを関数に追加できます

$("#elementID").hover(function(){ 
    //show here (mouse over)
    $("#elementToShow").show();
},function(){
    //Start timeout here, (mouse out)
    setTimeout(function() {
        $("#elementToHide").hide();
    }, 3000);
}
于 2013-11-14T17:41:17.047 に答える