在滾動時顯示元素，滾動時隱藏它

Question

我知道如何在用戶滾動到特定點時運行代碼，但我無法找到有關在用戶滾動時顯示元素的問題（無論在哪裏或在哪裏）然後在用戶停止滾動時隱藏它。有沒有一種簡單的方法在jQuery中實現這一點？

Answer 1

使用固定的元素定位，並使用此事件：

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

這將顯示該元素的同時滾動，然後淡出出來當滾動停止時。 stop()方法停止當前正在運行的動畫。

Fiddle

Answer 2

jQuery的不具有事件「scrollStop」這樣你就可以使用的setTimeout做你的行動

<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

我的建議是用一個函數來顯示元素滾動時立即完成，然後在一段時間後隱藏它。如果我們再次滾動，我們反而基本上將計時器「推」一點。這基本上是你可能聽說過的反彈的概念。因此，我的解決辦法是這樣的：

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/