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

Increase element opacity when user scrolls down the page

本文关键字：增加 元素 不透明度 用户 滚动      更新时间：2023-09-26

我看到了很多与用户滚动时修改元素不透明度有关的问题，但没有找到一个可以帮助我的方式解决问题的问题。我尝试了几个公式，但都无法达到我想要的效果。

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

编辑：预期效果为：

在

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

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

<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;
    }
  });
});
可以使用

.scrollTop() 方法检索当前滚动位置。

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

这里的例子

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

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

更新的示例

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

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

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>

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

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

这是指向另一篇文章的链接，该帖子对此进行了更详细的解释。

编程新手。设法在没有 JQuery 的情况下做到这一点

window.addEventListener(`scroll`, function (e) {
  const heroOpas = this.scrollY / 1000;
  if (heroOpas === 0) {
    sectionHero.style.opacity = 1;
  }
  if (heroOpas > 0) {
    sectionHero.style.opacity = `${1 - heroOpas}`;
  }
});

相关文章：