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

b91juud3  于 2023-05-19  发布在  其他
关注(0)|答案(4)|浏览(191)

我已经看到了很多问题,有关修改一个元素不透明度时,用户滚动,但还没有找到一个,帮助我的方式,我需要的。我试了好几个配方,都没能达到我想要的效果。
我有一个带有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;
    }
  });
});
6vl6ewon

6vl6ewon1#

您可以使用.scrollTop() method检索当前滚动位置。
要计算不透明度,请从元素的高度中减去scrollTop值,然后将其除以元素的高度。
Example Here

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

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

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

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

    return opacity;
  }
});
x6yk4ghg

x6yk4ghg2#

对于任何人试图这样做,但在相反的(元素淡出,因为你滚动)
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>
t40tm48m

t40tm48m3#

使用rbga代替rbg,并在用户滚动时更改alpha值。我显然不是100%确定你想要什么效果,但在大多数情况下,使用rgba比使用rgb和不透明度更好。
What are differences between RGB vs RGBA other than 'opacity'
这里是另一篇文章的链接,它更详细地解释了这一点。

xnifntxz

xnifntxz4#

对编程来说很新。不使用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}`;
  }
});

相关问题