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 (должно быть для окна между прочим) за пределы цикла, чтобы минимизировать вызовы функций.
• Вытащил $(this).offset().top, поэтому он вызывается только один раз за цикл.
• Заменено fadeIn / fadeOut на animate, поскольку затухание приводит к display:none (устанавливает размеры в ноль) и, таким образом, вызывает скачок страницы при ее исчезновении.
• Добавлен «исчезающий» класс, чтобы предотвратить повторение анимации каждый раз, когда окно прокручивается.
• Удалено else if как ненужное.
• Удалено prev(), так как вы должны нацелиться на h2 и ничего больше.

Answer 2

Удалить .prev().