Javascript 当用户滚动到每页底部之前时，Div会使不透明度减弱

我目前正在制作一个带有箭头的网站，提示用户向下滚动。我已经设法得到下面的代码，它提供了一个非常好的淡入淡出图标，但我想有图标不透明度开始淡出约300像素从我的网站上的每一页底部

$(window).scroll(function(){
   $(".down-arrow").css("opacity", 1 - $(window).scrollTop() / 300);
});

每一页都有不同的长度，所以如果有人能给我指出正确的方向，让这个动画从每一页的底部应用300px，那将是惊人的

干杯

编辑-我使用当前使用的代码制作了一个jsfiddle.net，用于：

这里有一个

fadeToBottom（）

包装成一个小小的jQuery插件：

$.fn.fadeToBottom=函数（d）{
变量w=$（窗口），
f=（）=>{$（this）.css（{opacity:Math.min（$（'body'）[0].scrollHeight-w.scrollTop（）-w.height（），d）/d}）；
如果（d）w.on（'加载滚动调整'，f）
}

用作

$（'.down arrow'）.fadeToBottom（300）；

您的帐户已更新

---

如果您关心页面性能，请使用以下版本（尤其是在同一页面上的多个元素上使用时！），确保加载Ben Alman的第一个版本（取决于它）：

$.fn.fadeToBottom=函数（d）{
变量w=$（窗口），
f=（）=>{$（this）.css（{opacity:Math.min（$（'body'）[0].scrollHeight-w.scrollTop（）-w.height（），d）/d}）；
$（this.css（{transition:'opacity 42ms'}）；
如果（d）w.on（'加载滚动调整'，$节气门（42，f））
}

这里有一个

fadeToBottom（）

包装成一个小小的jQuery插件：

$.fn.fadeToBottom=函数（d）{
变量w=$（窗口），
f=（）=>{$（this）.css（{opacity:Math.min（$（'body'）[0].scrollHeight-w.scrollTop（）-w.height（），d）/d}）；
如果（d）w.on（'加载滚动调整'，f）
}

用作

$（'.down arrow'）.fadeToBottom（300）；

您的帐户已更新

---

如果您关心页面性能，请使用以下版本（尤其是在同一页面上的多个元素上使用时！），确保加载Ben Alman的第一个版本（取决于它）：

$.fn.fadeToBottom=函数（d）{
变量w=$（窗口），
f=（）=>{$（this）.css（{opacity:Math.min（$（'body'）[0].scrollHeight-w.scrollTop（）-w.height（），d）/d}）；
$（this.css（{transition:'opacity 42ms'}）；
如果（d）w.on（'加载滚动调整'，$节气门（42，f））
}

document.body.scrollHeight提供文档的滚动高度。你可以在数学中使用它来计算从何处开始淡出。你能创建一个或共享更多的代码吗？如果这有助于您获得文档（页面）的高度

$（document）.height（）

首先，请将jquery引用添加到您的小提琴中。如果底部是300px，那么您想开始淡入淡出吗？jquery已经可以正常工作了？是的，我想让它从底部开始褪色300px。document.body.scrollHeight提供文档的滚动高度。你可以在数学中使用它来计算从何处开始淡出。你能创建一个或共享更多的代码吗？如果这有助于您获得文档（页面）的高度

$（document）.height（）

首先，请将jquery引用添加到您的小提琴中。如果底部是300px，那么您想开始淡入淡出吗？jquery已经可以正常工作了？但是是的，我想让它从底部开始衰减300像素。