Question

我是JQuery的新手，我可以做的就是如果点击某些内容并且你将要在下面看到的JQuery，可以使淡入淡出淡出。无论如何我只是想知道是否有人可以帮助我使这个背景不那么透明，因为屏幕向下滚动。到目前为止，我设法做到这一点，当屏幕是50px或更多，然后出现背景，但我希望能够使它慢慢变得不那么不透明（慢慢出现）。谢谢你的帮助！：P

人们说这里的问题与我的问题相同，但它的相似之处却不一样，原因如下：

我需要css选择器＆＃34; rgba（0,0,0,0.0）＆＃34;当页面向下滚动时，最后一个值需要慢慢增加并使其成为1（示例在这里：＆＃34; rgba（0,0,0,1和＃34;）。这是NOTHNG做得不透明

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"});
  }
  });
});

Answer 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 + ")"});

});

Answer 2

你可以使用延迟时间的淡入法

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

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

2 个答案: