ページスクロールで要素をフェードインする方法は？

Question

私は私のページに次の要素を持っている：

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

この要素のCSSは次のとおりです。

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

私は時にjQueryを使って.disappearから.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を使用します。