Попытка получить изображения только под окном просмотра исчезают при прокрутке

Question

Я пытаюсь следовать этому уроку для своего веб-сайта портфолио.

У меня почти все работает, но вместо того, чтобы только выцветать изображения, когда они появляются в окне, оно исчезает изображения, которые уже находятся в окне.

$(document).on("scroll", function () {
  var pageTop = $(document).scrollTop()
  var pageBottom = pageTop + $(window).height()
  var tags = $("section")

  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i]
    if ($(tag).position().top < pageBottom) {
      $(tag).addClass("visible")
    } else {
      $(tag).removeClass("visible")
    }
  }
})

section {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1.5s;
}

section.visible {
  opacity: 1;
  transform: translate(0, 0);
}

Answer 1

Это потому, что все скрыто, пока не сработает первое событие прокрутки. Чтобы это исправить, вы можете вручную вызвать событие прокрутки при первой загрузке страницы, чтобы отобразить элементы section, которые уже видны в области просмотра.

$(document).on("scroll", function () {
  // your code here...
}).trigger('scroll');

Стоит также отметить, что scroll Обработчик событий срабатывает для каждого пикселя , который вы прокручиваете. Поскольку такая производительность важна, поэтому стоит оптимизировать эту функцию обработчика.

var $tags = $("section");
var winHeight = $(window).height();

$(document).on("scroll", function() {
  var pageTop = $(document).scrollTop();
  var pageBottom = pageTop + winHeight;
  $tags.each(function() {
    this.classList.toggle(this.offsetTop < pageBottom)
  });
}).trigger('scroll');

$(window).on('resize', function() {
  winHeight = $(this).height();
});