如何在頁面滾動時使元素淡入？

Question

我在我的網頁以下元素：

<div id="banner" class="disappear">Hello</div> 

此元素的CSS是：

#banner {position:fixed;} 
.disappear {opacity:0;} 
.appear {opacity:1;}` 

我想知道如何從.disappear類使用jQuery的時候改變.appear頁面會滾動到某一點，然後當頁面返回原始位置時返回.disappear。

Answer 1

查看jQuery Waypoints。

使用這個插件，你可以做這樣的事情：

<div id="banner">Hello</div> 

和你的jQuery：

$("#banner").waypoint(function(){ 
    $(this).fadeIn(750); 
},{ 
    offset: 'bottom-in-view' 
}); 

Answer 2

我沒有做出完整的工作示例。但是每次窗口滾動時都需要使用$(window).scroll(function(){。然後在該功能中，您需要檢查$(window).scrollTop()以確定用戶滾動的距離。

http://jsfiddle.net/s8dhy/

然後根據該值，你會添加和刪除類或fadeIn和fadeOut。標題說你想「淡入淡出」，在這種情況下，你需要使用fadeIn和fadeOut。如果您只想添加和刪除課程，請使用addClass和removeClass。