スクロール中に要素が表示され、スクロールが停止すると非表示になる

Question

ユーザーが特定の点までスクロールしたときにコードを実行する方法を知っていますが、ユーザーがスクロールしている間に要素を表示するユーザーがスクロールを停止したときに非表示にします。 jQueryでこれを達成する簡単な方法はありますか？

Answer 1

使用すると、このイベントを使用して、あなたの要素の上に位置を固定し、スクロールが停止したとき。 stop()メソッドは、現在実行中のアニメーションを停止します。

Fiddle

Answer 2

jQueryのは、あなたの行動

<div> 
    <div class="fade"> 
     Scroll down i will become invisible 
    </div> 
</div> 

$(window).scroll(function() { 
    clearTimeout($.data(this, 'scrollTimer')); 
     $('.fade').show(); 

    $.data(this, 'scrollTimer', setTimeout(function() { 
     // do something 
     $('.fade').hide(); 
    }, 250)); 
}); 

http://jsfiddle.net/onqn2gjj/896/

Answer 3

私の提案を行うためのsetTimeoutを使用できるように、イベント「scrollStop」を持っていけない、スクロールがすぐに実行されたときに要素を表示するために、1つの機能を使用することですその後一定時間それを隠すことができます。もう一度スクロールすると、基本的には基本的にタイマーを少し前に「プッシュ」します。これは基本的にはあなたが聞いたかもしれないデバウンシングの概念です。したがって、私の解決策は次のようになります。その後、スクロール、それをフェードアウトしながら、これは、要素が表示されます

$(window).scroll(function() { 
    $(element).stop(true, true).show().fadeOut('fast'); 
}); 

：

var hideTimeout = null; 

var show = function() { 
    $('#theone').show(); 
} 

var hide = function() { 
    $('#theone').hide(); 
} 

$(document).ready(function(){ 

    $(window).scroll(function(e){ 
    if (hideTimeout) { 
     window.clearTimeout(hideTimeout); 
     hideTimeout = null; 
    } 
    show(); 

    window.setTimeout(hide, 500); 
    }); 

}); 

https://jsfiddle.net/386bstgh/1/