Javascript 如何使卷轴上的部分淡入淡出？

我正试图使我的网站的一部分淡出滚动。我试着看其他问题，但没有一个有用。以下是指向我的代码的链接：

任何帮助都将不胜感激。如果你能告诉我你的代码为什么工作，那也太好了

---

谢谢

在您的js中，您正在尝试使用

.social

类选择元素。该类没有设置在任何位置，因此jQuery不会选择任何元素，因此不会更改滚动上的不透明度值

Fix：将

class=“social”

添加到您的div中

//按照@Bojangles的建议，只搜索元素一次以提高性能。
变量$socialDiv=$（'.social'）；
$（窗口）。滚动（函数（）{
//获取窗口的滚动位置
var windowScroll=$（this.scrollTop（）；
//缓慢滚动社交div并将其淡出
$socialDiv.css({
“页边距顶部”：（windowScroll/3）+“px”，
“不透明度”：1-（windowScroll/550）
});
});
div{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：500%；
背景：红色；
}

你好
您应该将
var$socialDiv=$（'.social'）
移到滚动处理程序之外，以减少每次滚动事件查询DOM时对性能的影响我只是将OP的代码复制到那里，没有修改任何内容。现在已修复。是否仍然可以使用与所示相同的方式，使其仅在底部时100%淡出，在顶部时0%淡出？那太好了。我希望这是有意义的…是的，用
Math.max（$（document.height（），$（window.height（））
替换你的“神奇高度数字”
550
。