Javascript 当用户向下滚动页面时增加元素不透明度

Increase element opacity when user scrolls down the page

提问by Juan Bonnett

I've seen a lot of question related to modifying an element opacity when user scrolls but haven't found one that helps me the way I need. I have tried several formulas and haven't been able to achieve the effect I want.

我已经看到很多与在用户滚动时修改元素不透明度相关的问题，但没有找到一个可以帮助我满足我需要的问题。试了好几个公式都没有达到我想要的效果。

I have a header with a BG image, and inside it a div that I use as an overlay, and I want it to get darker and darker smoothly (opacity increase) while the user scrolls down.

我有一个带有 BG 图像的标题，其中有一个用作叠加层的 div，我希望它在用户向下滚动时平滑地变得越来越暗（不透明度增加）。

EDIT:The desired effect is:

编辑：所需的效果是：

Opacity is by default set to 0.2 in CSS. When user starts scrolling down it will start increasing from 0.2 to 1. When user scrolls up again it will decrease from 1 (or whatever value it was) to 0.2.

不透明度在 CSS 中默认设置为 0.2。当用户开始向下滚动时，它将开始从 0.2 增加到 1。当用户再次向上滚动时，它将从 1（或任何值）减少到 0.2。

Fiddle: https://jsfiddle.net/z7q2qtc6/

小提琴：https: //jsfiddle.net/z7q2qtc6/

<div class='nice-header'>
  <div class='header-overlay'></div>
</div>

CSS

CSS

.nice-header {
  position: relative;
  height: 300px;
  background: center center;
  background-size: cover;
  background-image: url(http://www.boeing.com/resources/boeingdotcom/commercial/787/assets/images/marquee-787.jpg);
}

.header-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgb(0,0,0);
  opacity: 0.2;
}

JS

JS

$(window).scroll(function() {
  $('.header-overlay').css({
    opacity: function() {
      var opacity = 0;
      //TODO:
      //Set opacity to a higer value whilst user scrolls
      return opacity;
    }
  });
});

回答by Josh Crozier

You can retrieve the current scrolling position by using the .scrollTop()method.

您可以使用.scrollTop()方法检索当前滚动位置。

To calculate the opacity, subtract the scrollTop value from the height of the element and then divide that by the element's height.

要计算不透明度，请从元素的高度中减去 scrollTop 值，然后将其除以元素的高度。

Example Here

示例在这里

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();

  $('.header-overlay').css({
    opacity: function() {
      var elementHeight = $(this).height();
      return 1 - (elementHeight - scrollTop) / elementHeight;
    }
  });
});

If you want to account for the element's initial opacity of 0.2:

如果要考虑元素的初始不透明度0.2：

Updated Example

更新示例

$('.header-overlay').css({
  opacity: function() {
    var elementHeight = $(this).height(),
        opacity = ((1 - (elementHeight - scrollTop) / elementHeight) * 0.8) + 0.2;

    return opacity;
  }
});

回答by cupoftegan

For anyone trying to do this but in the reverse (the elements fades out as you scroll)

对于任何试图这样做但反过来的人（元素在滚动时淡出）

opacity = ((elementHeight - scrollTop) / elementHeight);

opacity = ((elementHeight - scrollTop) / elementHeight);

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();

        $('.header-overlay').css({
        opacity: function() {
            var elementHeight = $(this).height(),
            opacity = ((elementHeight - scrollTop) / elementHeight);
            return opacity;
        }
    });
});

.nice-header {
  position: relative;
  height: 300px;
  background: center center;
  background-size: cover;
  background-image: url(http://www.boeing.com/resources/boeingdotcom/commercial/787/assets/images/marquee-787.jpg);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  opacity: 1;
}

.dummy {
  height: 900px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='nice-header'>
  <div class='header-overlay'>

  </div>
</div>
<div class='dummy'>

</div>

回答by AlexanderGriffin

Use rbga instead of rbg and change the alpha value as the user scrolls. I'm obviously not 100% sure what effect you are going for but in most cases using rgba is a better approach than using rgb and opacity.

使用 rbga 而不是 rbg 并在用户滚动时更改 alpha 值。我显然不是 100% 确定你想要什么效果，但在大多数情况下，使用 rgba 是比使用 rgb 和不透明度更好的方法。

What are differences between RGB vs RGBA other than 'opacity'

除了“不透明度”之外，RGB 与 RGBA 之间有什么区别

Here is the link to another post that explains this in further detail.

这是另一篇文章的链接，更详细地解释了这一点。