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

Question

所以我正在这样使用 jQuery 脚本；

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

在滚动到页面顶部之外时隐藏绝对定位的 flexbox 元素。我在页面下方还有其他内容，我想对其应用相同的规则集；我希望它们在页面底部可见时处于 100% 不透明度，然后随着用户滚动而淡出，但这似乎只适用于 [=22= 中显示的第一个元素] 最初。我不确定这是为什么 - 我试过 700 值，但对于页面下方的元素来说，它似乎从来都不准确。

Here's a jsfiddle

我用这个做的内容是文本和图像。我在想，这可能无法按照我希望的方式实现——如果我能让它工作，理想情况下，一个文本块会从上到下淡出，而不是一次淡出整个元素，但我明白用这种方法可能是不可能的。

Answer 1

您需要获取元素在页面上的位置并将其用作淡入淡出开始时的偏移量。 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 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 并将它们放在 window 的顶部和底部。然后我使用 z-index 将它们设置在所有其他元素之上，然后给它们一个具有透明度的渐变，从而为您提供元素的 fade-in/out 效果，如您所提到的。

Answer 3

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

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

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

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

对所有要淡化的项目应用通用 class
添加了基本设置，以便仅当元素超过视口的一半时才开始淡出（视口的上半部分可以看作 "fade zone"）
不透明度值与元素在 "fade zone"

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

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

Fade elements as they reach the top of the page?

html

javascript

css

jquery

scrolltop