向下滚动页面时开始淡出答案

【问题标题】：Start fading on scrolling down the page向下滚动页面时开始淡出
【发布时间】：2017-07-31 14:32:28
【问题描述】：

所以我遇到了这个问题，我不知道如何开始淡出文本并在页面向下滚动时开始将其向上移动一点。您可以在 Apple 的 Macbook Pro 网站上完美地看到它

我已经苦苦挣扎了 5 个小时，但仍然无法弄清楚。非常感谢您的帮助。

我想用 jquery 来做。

【问题讨论】：

Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window的可能重复
你能粘贴你的代码吗？有什么问题？

标签： jquery scroll fading

【解决方案1】：

你可以检测滚动位置，然后做一些数学运算来设置你想要淡入淡出的文本的不透明度，它可能看起来像这样

$(document).ready(function(){

  $(window).scroll(function(){
    const max = 300;
    var scrolled = $('body').scrollTop();
    $('.textToFade').css('opacity', 1 - (scrolled/max));
  })

})

body, html {
  width: 100%;
  height: 150%;
  background-color: lightblue;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
 <p class='textToFade'>
 this is text
 </p>
</body>

在 sn-p 中可能有点难以看到，所以这里也是一个小提琴https://jsfiddle.net/v75xn742/3/

【讨论】：

【解决方案2】：

请检查整页模式

    var p = $(".DivO> span").offset().top;
    $(document).scroll(function () {
        if ((p < $(this).scrollTop()) && ($(".DivO").height() + $(".DivO").offset().top - $(".DivO> span").height()) > $(this).scrollTop())
            $(".DivO> span").fadeIn(2000);
        else 
            $(".DivO> span").fadeOut(500);
    });

.Div {
        width: 100%;
        height: 1000px;
        text-align: center;
    }

    .DivO {
        font-size: 50px;
    }

        .DivO span {
            display: none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Div"></div>
<div class="Div DivO"><span>It’s razor thin, feather light, and even faster and more powerful than before. It has the brightest, most colorful Mac notebook display ever. And it features the Touch Bar — a Multi-Touch enabled strip of glass built into the keyboard for instant access to the tools you want, right when you want them. MacBook Pro is built on groundbreaking ideas. And it’s ready for yours.</span></div>
<div class="Div"></div>

【讨论】：

这将使 Firefox 在滚动时变砖。它会在每个滚动像素中触发淡入淡出的 div。至少添加一个 dethrottle，我建议将 var 设置为 elementIsShown=true 以便您可以检查它是否已经显示
@Martijn-感谢您的帮助。我已经把代码做得更好了。