jquery在滚动时增加/减少图像对比度答案

【问题标题】：jquery increase/decrease image contrast on scrolljquery在滚动时增加/减少图像对比度
【发布时间】：2018-03-23 13:37:10
【问题描述】：

我正在开发的这个网站使用 HTML5、CSS3、Bootstrap 4 和 Jquery。我想在页面顶部的全屏背景图像上产生滚动效果（100vh hero 横幅类型的东西）。我正在尝试在用户向下滚动时逐渐增加图像的对比度（css 过滤器：对比度（some%））（如果图像在离开视口时完全无法识别，则很好）。

我有一些 Jquery 可以达到我正在寻找的效果，但是我希望效果更加渐进。

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

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

谢谢！

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


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

在 sn-p 中查看下面的代码

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

将代码替换为

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

请勿复制此代码，请理解谢谢。

【讨论】：

谢谢。我知道 0% 的对比度是问题所在，从逻辑上讲，当该值取自 .scrollTop() 时，我的代码会将对比度设置为 0%，该值在页面顶部等于 0。我之前试图通过尝试将 100 添加到 .css (...) 规则中的 pixeltop 来使其工作，这给了我 1000% 的顶部（只需在 pixeltop 值的前面添加 100）。这段代码正是我想要的，因为增加 var pixeltop 中的第二个 100 会夸大效果，让我可以对其进行微调。

【解决方案2】：

$(document).ready(function (){
  $(window).scroll(function(){
    
    var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
    console.log(pixelstop);
    $(".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/1.8.3/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>

100 是滤镜对比度的默认值，而不是 0。这就是背景变灰的原因，因为它达到了零。

【讨论】：