如何将滚动上的淡入淡出链接到滚动的位置？

Question

上周，我问了一个有关如何减慢滚动效果的问题。

我得到的帮助很棒，可以回答我的要求，但是它仍然没有按照我想要的去做。

而不是减慢淡入淡出效果，我想将其链接到查看器当前正在查看的页面上的位置。 因此，如果我将页面向下滚动20像素，则不透明度为10％（如果再次滚动至相同位置，则会再次变为类似状态）。

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

Answer 1

从这个问题尚不清楚您到底想要实现什么！

我已经更新了小提琴，以便滚动时可以根据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;
  }
});

参见jsFiddle

Answer 2

此处的Javascript代码将为滚动顶部大于20px的元素设置不透明度（0.5）。 如果滚动顶部小于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 */
    }
}

Answer 3

你的意思是这样吗？ 您可以根据距离，不透明度进行调整。 我相信它的行为有所不同。

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

 <div class="custom" > <div class="top"><img style="position: relative" src="http://stanfordflipside.com/images/279puppies.jpg"></div> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>