当元素到达页面顶部时淡出元素？

Question

所以我正在使用jQuery脚本;

$(window).scroll(function(){
    $(".element").css("opacity", 1 - $(window).scrollTop() / 700);
  });

隐藏绝对定位的flexbox元素，因为它滚动到页面顶部。我在页面上还有其他内容，我想要应用同一套规则;我希望它们在页面底部可见时达到100％不透明度，然后在用户滚动时让它们淡出，但这似乎只适用于最初在窗口中显示的第一个元素。我不知道为什么会这样 - 我已经玩过700值，但它对于页面下方的元素似乎永远不准确。

Here's a jsfiddle

我正在做的内容是文本和图像。我认为这可能不是我希望的方式 - 如果我可以让它工作，理想情况下，文本块从顶部到底部逐渐淡出而不是整个元素，但我理解用这种方法可能是不可能的。

Answer 1

我建议你对所有要使用淡入淡出行为的元素使用公共类。您也可以使用选择器的组合。实现的主要问题是您只能监听视口的滚动位置，忽略了页面上的不同元素与文档顶部的垂直距离不同的事实。您必须计算元素相对于视口顶部的位置。

因此，要做到这一点，您必须：

1. 滚动时，遍历要淡化的每个元素
2. 计算相对于视口顶部的垂直偏移（基本上是元素的顶部偏移位置减去当前滚动位置）
3. 如果此偏移超过某个阈值（可以是像素值，或视口高度的百分比），则开始计算淡入淡出

在我下面的概念验证示例中，我有：

• 对所有要褪色的项目应用一个公共类
• 添加了基本设置，以便仅当元素超过视口的一半时才开始淡出（视口的上半部分可以看作“淡化区”）
• 不透明度值与“淡入淡出区域”内元素位置之间的线性插值

$(window).scroll(function() {
  // Setting: Start fading halfway up the page
  var startPos = 0.5;

  // Cache window object
  var $w = $(window);

  // Basically, we go through each element and check its relative position within the viewport
  $('.scrollFade').each(function() {

    // Get current relative position in viewport, based on the top edge
    var pos = $(this).offset().top - $w.scrollTop();

    // Get viewport height
    var vh = $w.height();

    if (pos < vh * startPos) {
      // If element has past the starting threshold, we fade it
      $(this).css('opacity', pos / (vh * startPos) * 1);
    } else {
      $(this).css('opacity', 1);
    }
  });
});

.textblock {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  bottom: 0px;
}

.extratext {
  margin-top: 500px;
}

div {
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="textblock scrollFade">
    hey hey hey!
  </p>
</div>

<div>
  <p class="extratext scrollFade">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32.
  </p>
</div>

Answer 2

我就是这样做的：

.topGradient{
    height: 100px;
    width: 100%;
    background:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    position: fixed;
    top:0;
    z-index: 100;
}


.bottomGradient{
    height: 100px;
    width: 100%;
background:linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));   position: fixed;
    bottom:0;
    z-index: 100;
}

Here is the JSFiddle demo

我做的是创建2 div并将它们放在窗口的顶部和底部。然后我使用z-index将它们设置在所有其他元素之上，然后给它们一个具有透明度的渐变，从而为您提供元素的淡入/淡出效果。

Answer 3

您需要获取页面上的元素位置，并将其用作淡入淡出开始时的偏移量。 Here is an updated fiddle。

$(window).scroll(function(){
    $(".textblock").css("opacity", 1 - $(window).scrollTop() / 700);
    var offsetTop = $(".extratext").offset().top;
    $(".extratext").css("opacity", 1 - ($(window).scrollTop() - offsetTop) / 700);
  });

Answer 4

fadeAtTop(el) {
    const startPos = 0.25;
    const $window = $(window);
    const viewportHeight = $window.height();

    el.toArray().forEach(el => {
      const $el = $(el);
      let position = $el.offset().top - $window.scrollTop();
      let opacity = position < viewportHeight * startPos ? position / (viewportHeight * startPos) * 1 : 1;

      $el.css('opacity', opacity);
    });
  }