javascript - 滚动时更改 div 不透明度

Question

我想让 div 元素在滚动时通过改变不透明度淡入和淡出。这听起来很简单，但无法让它发挥作用。

我遇到的问题是 div 位于我页面的中间而不是顶部，所以 scrollTop 不应该正常工作吗？

var fade = $('.b_wrapper');
var range = 400;

$(window).on('scroll', function() {
  var st = $(this).scrollTop();
  fade.each(function() {
    var offset = $(this).offset().top;
    var height = $(this).outerHeight();
    offset = offset + height / 1;
    
    $(this).css({
      'opacity': 1 - (st + offset - range) / range
    });
  });
});

.content {
  height: 100px;
}

.b_wrapper {
  background: lightgreen;
  margin-top: 40px;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="content"></div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>

( JsFiddle )

Answer 1

您可以使用 Intersection Observer API .它监视目标元素与其祖先元素或视口(viewport)之间交集的变化。

首先，创建一个带有选项的新观察者:

let options = {
  root: null,
  threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
}
let observer = new IntersectionObserver(callback, options);

• root 指定祖先(包含)元素，例如使用 document.querySelector()，或使用 null 的视口(viewport)。

• threshold 可以采用要观察的交集阈值数组，我们将直接将其用作元素的不透明度。所以每当一个元素与视口(viewport)的交集比达到这些值之一时，就会触发回调。(如果你想要更细粒度的序列，你可以在这里使用一个函数来构建数组并且不要不想手写一切。)

接下来，将每个元素添加到观察者:

for (const target of document.querySelectorAll('.b_wrapper')) {
    observer.observe(target);
}

回调非常简单，我们可以直接使用提供的intersectionRatio作为不透明度。 entries 是一个包含所有可循环访问的监视元素的数组:

let callback = (entries, observer) => {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio
  });
};

让您入门的内容就这么多了。去阅读 documentation , 它非常好并且有很多例子。

let callback = (entries, observer) => {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio
  });
};

let options = {
  root: null,
  threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
}
let observer = new IntersectionObserver(callback, options);

for (const target of document.querySelectorAll('.b_wrapper')) {
    observer.observe(target);
}

.b_wrapper{
  margin: 20px;
  padding: 20px;
  background: lightgreen;
}

<div class="b_wrapper"><p>this is a div</p></div>
<div class="b_wrapper"><p>this is a div</p></div>
<div class="b_wrapper"><p>this is a div</p></div>
<div class="b_wrapper"><p>this is a div</p></div>
<div class="b_wrapper"><p>this is a div</p></div>
<div class="b_wrapper"><p>this is a div</p></div>
<div class="b_wrapper"><p>this is a div</p></div>
<div class="b_wrapper"><p>this is a div</p></div>