jquery - Jquery：（在 10 行以下）当 body.scrolltop > this 'h2' 时，将 h2 淡出，如果不是，将其淡入

Question

当 body 窗口的顶部大于或等于 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所以每个循环只调用一次。
• 用动画替换了 fadeIn/fadeOut，因为淡入淡出会导致 a display:none（将尺寸设置为零），从而导致页面在消失时跳转。
• 添加了一个“褪色”类，以防止每次窗口滚动时重复动画。
• 删除else if，因为它是不必要的。
• 删除prev()，因为你应该针对的h2，没有别的。

Answer 2

删除.prev().