Question

上周我问了一个关于如何减慢滚动效果的问题How to slow down a fade effect?

我得到的帮助很棒并且回答了我的要求，但它仍然没有做我想做的事。

而不是减慢淡入淡出效果，而是想将它链接到查看器当前看到的页面上的位置。因此，如果我向下滚动页面20px，则不透明度为10％（如果我向后滚动到同一位置，则会再次像这样）。

我试过搜索类似的效果但找不到。因此，我想知道这甚至可能吗？

Answer 1

从问题中不清楚你想要达到什么目标！

我已经更新了小提琴，因此滚动时，滚动将根据div的高度设置不透明度，而不是淡入淡出效果。

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

请参阅this fiddle

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

请参阅in jsFiddle

Answer 2

这里的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 */
    }
}

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何将滚动淡入淡出滚动到滚动位置？

3 个答案: