淡出元素到达页面顶部？

Question

所以我像这样使用jQuery脚本；

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

隐藏绝对定位的flexbox元素（滚动到页面顶部之外）。 我在页面上还有其他内容，我想对它们应用相同的规则集； 我希望它们在页面底部可见时具有100％的不透明度，然后在用户滚动时使其淡出，但这似乎只对最初显示在窗口中的第一个元素有效。 我不确定为什么会这样-我已经尝试过700值，但对于页面下方的元素似乎永远都不准确。

这是一个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;
}

这是JSFiddle演示

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

Answer 3

您需要获取元素在页面上的位置，并将其用作开始淡入时的偏移量。 这是更新的小提琴 。

$(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);
    });
  }