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

所以我像这样使用jQuery脚本

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

要隐藏绝对定位的flexbox元素，请将其从页面顶部滚动出来。我有其他的内容在页面上进一步向下，我想应用这套相同的规则；我希望它们在页面底部可见时保持100%的不透明度，然后随着用户滚动而淡出，但这似乎只适用于最初显示在窗口中的第一个元素。我不确定这是为什么——我已经使用了

700

值，但对于页面下方的元素，它似乎从来都不准确

---

我用它做的内容是文本和图像。我认为这可能不可能以我希望的方式实现-如果我能实现这一点，理想情况下，文本块从上到下逐渐消失，而不是一次将整个元素消失，但我明白，使用这种方法可能是不可能的。

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

---

我会这样做：

.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;
}

---

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

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

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

在滚动时遍历要淡出的每个元素

计算其相对于视口顶部的垂直偏移（基本上是元素的顶部偏移位置减去当前滚动位置）

如果该偏移量超过某个阈值（可以是像素值或视口高度的百分比），则开始计算淡入度

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

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

$（窗口）。滚动（函数（）{
//设置：在页面的一半开始淡入
var startPos=0.5；
//缓存窗口对象
var$w=$（窗口）；
//基本上，我们遍历每个元素并检查其在视口中的相对位置
$（'.scrollFade'）。每个（函数（）{
//基于顶边获取视口中的当前相对位置
var pos=$（this.offset（）.top-$w.scrollTop（）；
//获取视口高度
var vh=$w.高度（）；
如果（位置
.textblock{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
底部：0px；
}
.外文本{
边缘顶部：500px；
}
div{
高度：100vh；
}


嘿嘿嘿！


与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克抬起头来
其中一个比较晦涩的拉丁语单词，concertetur，来自《洛伦·伊普斯姆》的一段文字，通过对古典文学中该词的引用，发现了这个毫无疑问的来源。Lorem Ipsum来自“de Finibus Bonorum”第1.10.32节和第1.10.33节
西塞罗于公元前45年创作的《爱与恶的极端》。这本书是一本关于伦理学理论的论文，在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet…”来自第节中的一行
1.10.32.

FadeAtop（el）{
常数startPos=0.25；
const$window=$（window）；
常量视口高度=$window.height（）；
el.toArray（）.forEach（el=>{
常数$el=$（el）；
let position=$el.offset（）.top-$window.scrollTop（）；
不透明度=位置<视口高度*起始点位置/（视口高度*起始点位置）*1:1；
$el.css（“不透明度”，不透明度）；
});
}
不需要除以/700，您可以除以元素的偏移量，如：$（“.textblock”）.css（“不透明度”，1-$（窗口）.scrollTop（）/$（“.textblock”）.offset（）.top）；这是因为scrollTop仅基于视口本身，而元素位于代码的各个部分。您必须遍历每个元素，并检查其相对于视口顶部的相对位置，然后决定是否对其进行淡入淡出（或淡入淡出的程度）？我真的很喜欢这个解决方案，实际上我也尝试过实现类似的东西，但是我在这个网站的背景中有一个固定位置的全屏视频，所以我不希望在非文本元素的顶部显示渐变。如果有办法操纵z-index或psuedo元素使之成为可能，那将是完美的，但我认为这不是一个真正伟大的解决方案。我甚至没有想过从顶部计算价值。做得很好，谢谢你的帮助
.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;
}

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