javascript - jquery增加/减少滚动图像对比度

Question

我正在开发的这个网站使用的是 HTML5、CSS3、Bootstrap 4 和 Jquery。我想在页面最顶部的全屏背景图像上产生滚动效果(100vh 英雄横幅类型的东西)。我试图在用户向下滚动时逐渐增加图像的对比度(css 过滤器:对比度(某些％))(如果图像在离开视口(viewport)时完全无法识别，这很好)。

我有一些 Jquery 可以在某种程度上实现我正在寻找的效果，但我希望效果更加渐进。

我遇到的主要问题是，当用户滚动回页面顶部时，对比度值设置为 0%，留下完全变灰的图像。我想要的是当用户一直向上滚动到页面顶部时，对比度逐渐降低到正常值 (100%)。

我已经设置了一个非常简化的代码笔。我无法获得 css 背景图像 url 值来引用来自 codepen 的外部链接，因此我将效果定位在全屏图像 () 上。

谢谢!

Link to the Pen: [codepen-link][1]


[1]: http://codepen.io/wdzajicek/pen/MVovZE

查看下面的代码片段

$(document).ready(function (){
      $(window).scroll(function(){
        var pixelstop = $(window).scrollTop();
        $(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
      });
    });

.header {
      height: 100vh;
    }

    .myimage {
      position:absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      width; 100%;
      z-index: -1;
    }

    .jumbotron {
      position: relative;
      background-color: unset;
      margin-top: 150px;
      z-index: 999;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header text-center">
    <img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
    </header>

Answer 1

$(window).scrollTop(); 中存在主要问题，它将返回 0 值这就是为什么对比度值设置为 0% 而留下完全变灰的图像

var pixelstop = $(window).scrollTop();

将代码替换为

var pixelstop = 100+100*$(window).scrollTop()/$(window).height();

不要只是复制此代码，请理解，谢谢。