ボディウィンドウの上部がh2タグ以上の場合、h2をフェードアウトし、ウィンドウの上部がそのh2の上に戻った場合は、そのh2をフェードインします。
このコードは、下にスクロールして渡すと個々のh2がフェードアウトしますが、上にスクロールしてもフェードインしません。何が間違っているのかわかりません。私はjqueryが得意ではありません。どんな助けでも大歓迎です。
$(window).scroll(function() {
$('.grid_12').find('h2').each(function () {
if ($(this).offset().top <= $('body').scrollTop()) {
$(this).fadeOut(500)
} else if
($(this).offset().top >= $('body').scrollTop()) {
$(this).prev().fadeIn(500)
}
});
});
これを試してください（デモ）：
$(window).scroll(function() {
// added 100 so you can see the fade before it goes out of the viewport
var bodyTop = $(window).scrollTop() + 100;
$('h2').each(function() {
var thisTop = $(this).offset().top,
faded = $(this).is('.faded');
if ( thisTop < bodyTop ) {
if (!faded){
// fade out h2 if not already faded
$(this).addClass('faded').animate({ opacity: 0 });
}
} else {
if (faded) {
// fade in h2 if faded
$(this).removeClass('faded').animate({ opacity: 1 });
}
}
});
});
ノート：
scrollTop関数呼び出しを最小限に抑えるために、（ウィンドウbtw用である必要があります）をループの外側に移動しました。$(this).offset().topので、ループごとに1回だけ呼び出されます。display:noneフェードの結果（寸法がゼロに設定される）になり、ページが消えたときにページがジャンプするため、fadeIn/fadeOutをanimateに置き換えました。else if不要なので削除しました。prev()をターゲットにする必要があるため、削除されましh2た。を削除し.prev()ます。