当页面向下滚动时，如何使这个背景变得不那么不透明？答案

【问题标题】：How can I make this background become less opaque as the page scrolls down?当页面向下滚动时，如何使这个背景变得不那么不透明？
【发布时间】：2017-01-31 13:48:23
【问题描述】：

我是 JQuery 的新手，实际上我所能做的就是让一个 div 淡入淡出，如果点击了某些东西并且您将在下面看到 JQuery。无论如何，我只是想知道是否有人可以帮助我在屏幕向下滚动时使这个背景不那么不透明。到目前为止，我已经成功地做到了，当屏幕向下 50 像素或更多时，背景就会出现，但我希望能够让它慢慢变得不那么不透明（慢慢出现）。谢谢你的帮助！ :P

人们说有一个和我一样的问题，它相似但不一样，原因如下：

我需要 css 选择器 "rgba(0, 0, 0, 0.0)" 最后一个值需要慢慢增加并达到 1（这里的示例： "rgba(0, 0, 0, 1" ）为页面向下滚动。这与不透明度无关

jQuery：

$(document).ready(function() {

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 100) {
    $(".top-nav-container").css({"background-color": "rgba(0, 0, 0, 0.1"});
  } else {
    $(".top-nav-container").css({"background-color": "rgba(0, 0, 0, 0.0"});
  }
  });
});

【问题讨论】：

Jquery/Javascript Opacity animation with scroll的可能重复
阅读我的代码，可能几乎是同一个问题，但 Jquery 代码完全不同。
但它应该让你知道如何解决它
抱歉，没有。该人正在使用偏移量，而我不想使用偏移量，因为我听说它会使您的网站无响应
那里没有人使用偏移量，但无论如何

标签： javascript jquery html css

【解决方案1】：

根据滚动顶部高度和窗口高度的商计算不透明度：

$(document).scroll(function() {

    var wh = $(window).height();
    var y = $(this).scrollTop();

    var thisOpacity = 1 - (y / wh);    

    $(".top-nav-container").css({"background-color": "rgba(0, 0, 0, " + thisOpacity + ")"});

});

【讨论】：

感谢您的宝贵时间，但我不能使用 opacity 查看，因为要让上面的文本不受影响需要永远这个 CSS 选择器“rgba(0, 0, 0, 0.0)”？
嗯，它似乎不起作用，如果有道理，最后一个 " 没有合作伙伴：/

【解决方案2】：

您可以使用带有延迟时间的淡入方法

 $(".top-nav-container").fadeIn(1000);

【讨论】：

我知道你来自哪里，但我的整个 div 会消失并重新出现，因为我只是在寻找受影响的背景：P