jQuery ：（ 10行未満）body.scrolltop>この 'h2'の場合、それをフェードアウトします。

Question

ボディウィンドウの上部が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)
         }   
 });
});

Answer 1

これを試して （デモ):

$(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 ループの外側の外側の外側の外側の外側の外側の外側にあります。
• 引き出しました $(this).offset().top したがって、ループごとに1回だけ呼ばれます。
• フェードが発生するため、フェデイン/フェードアウトをアニメーションに置き換えました display:none （寸法をゼロに設定します）ため、ページが消えたときにページがジャンプします。
• ウィンドウがスクロールするたびにアニメーションを繰り返すのを防ぐために、「フェードされた」クラスを追加しました。
• 削除 else if 不要なので。
• 削除 prev() ターゲットにする必要があります h2 何もありません。

Answer 2

削除する .prev().