Javascript 如何将淡入淡出卷轴链接到卷轴的位置？

上周我问了一个关于如何减缓滚动效果的问题

我得到的帮助非常出色，回答了我的要求，但它仍然没有做我希望它做的事情

与其减缓淡入效果，不如将其链接到查看器当前看到的页面上的位置。因此，如果我向下滚动页面20px，例如，不透明度为10%（如果我向后滚动到相同的位置，同样会如此）

---

我尝试过寻找类似的效果，但没有找到。因此，我想知道这是否可能

此处Javascript代码将设置元素的不透明度（0.5），滚动顶部大于20px。如果滚动顶部小于20px，则重置不透明度

window.onscroll = function() {myFunction()};
var org_opacity = document.getElementById('element_id').style.opacity;
if(org_opacity == null || org_opacity == "")
{
    org_opacity = 1;
}

function myFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
       document.getElementById('element_id').style.opacity = (1 - document.body.scrollTop / 200); /* set the opacity that you want */
    } else {
       document.getElementById('element_id').style.opacity = org_opacity; /* reset the opacity to its original value */
    }
}

---

你是说像这样的事吗？您可以根据距离、不透明度进行调整。我相信它的行为是不同的

$（窗口）。滚动（函数（）{
$（“.top”）.css（“不透明度”，1-$（窗口）.scrollTop（）/200）；
});
从这个问题上看，不清楚您到底想要实现什么

我已经更新了提琴，这样当你滚动时，卷轴将根据div的高度设置不透明度，而不是淡入淡出效果

$(window).scroll(function(){
    $('.fade').css('opacity', 1 -  ($(window).scrollTop() / $(".hero-unit").height()));
});

看

编辑1

如果您想避免jQuery依赖，下面是简化的Javascript

var fadables = document.getElementsByClassName('fade');
var container = document.getElementsByClassName('hero-unit')[0];
window.addEventListener("scroll", function() {
  var winTop = window.pageYOffset || documentElement.scrollTop || body.scrollTop || 0;
  var containerTop = container.offsetHeight;
  var opacity = 1 - winTop / containerTop;
  for (var i = 0; i < fadables.length; i++) {
    fadables[i].style.opacity = opacity;
  }
});

var fadables=document.getElementsByClassName（'fade'）；
var container=document.getElementsByClassName（'hero-unit'）[0]；
addEventListener（“滚动”，函数（）{
var winTop=window.pageYOffset | | documentElement.scrollTop | | | body.scrollTop | 0；
var containerTop=container.offsetHeight；
var不透明度=1-winTop/containerTop；
对于（变量i=0；i

请参见第页的“位置链接”是什么意思？你想在页面中定义渐变停止点吗？@norcal_johnny的想法是对的。我现在只是想知道是否有一种非jQuery的方法可以做到这一点。@Schro当然有，给我几分钟时间，我会更新我的答案。@Schro哦，别担心，看起来有人刚刚发布了一个js版本。这正是我的意思。没有jQuery有没有办法做到这一点？这也正是我的意思。@Schro我添加了简单的JS代码来做同样的事情。请检查。有没有办法让效果更快发生？如果是这样，我需要调整哪些部分？
1-（winTop/containerTop*x）
您可以使用x的值，可能是2或3？无法让您的工作，您有JFIDLE版本吗？