Question

我已经看到很多与用户滚动时修改元素不透明度相关的问题，但是找不到能帮助我的方式。我尝试了几种配方，并且无法达到我想要的效果。

我有一个带有BG图像的标题，里面有一个我用作叠加的div，我希望它在用户向下滚动时变得更暗和更暗（不透明度增加）。

修改期望的效果是：

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

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

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

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

Answer 1

您可以使用.scrollTop() method。

检索当前滚动位置

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

Example Here

UIButton

如果您想要考虑元素的初始不透明度$(window).scroll(function() { var scrollTop = $(this).scrollTop(); $('.header-overlay').css({ opacity: function() { var elementHeight = $(this).height(); return 1 - (elementHeight - scrollTop) / elementHeight; } }); });：

Updated Example

0.2

Answer 2

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

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

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

Answer 3

对于任何尝试这样做但反过来的人（元素在滚动时逐渐消失）

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>

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

3 个答案: