Jquery:(10行以下)当body.scrolltop>这个'h2'，淡出那个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 （应该是为了window btw）在循环之外以最小化函数调用。
• 拉出 $(this).offset().top 因此每个循环只调用一次。
• 将 fadeIn/fadeOut 替换为 animate，因为淡入淡出会导致 display:none（将尺寸设置为零），从而导致页面在消失时跳转。
• 添加了“faded”类，以防止每次窗口滚动时重复动画。
• 删除了 else if，因为它是不必要的。
• 删除了 prev()，因为您应该定位 h2 而不是其他任何东西。

Answer 2

删除 .prev()。