javascript - 尝试仅让图像在视口(viewport)下方淡入滚动

Question

我正在尝试关注 this tutorial用于我的投资组合网站。

我几乎已经让它工作了，但它不是仅在图像进入窗口时淡入淡出，而是使窗口中已有的图像淡出。

$(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

这是因为在第一个滚动事件触发之前所有内容都是隐藏的。要解决此问题，您可以在页面首次加载时手动触发滚动事件，以显示已在视口(viewport)中可见的 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();
});