滚动时更改 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 。 它监视目标元素与其祖先元素或视口之间交集的变化。

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

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指定视口。

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

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

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
  });
};

这么多让你开始。 Go 阅读文档，非常好，有很多例子。

 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>

Answer 2

可能不是最好的，但这是我的尝试：

• 在滚动上，我检查每个元素的 position 以查看哪个元素最居中

• 在 window 调整大小时，我更新屏幕中心值

 let centerOfScreen = window.innerHeight / 2; let pageScroll; let closestCenteredDivPosition = 999999; let currentIndex; let wrappers = document.getElementsByClassName("wrapper"); let positions = []; for (let e of wrappers) { positions.push(e.offsetTop + e.offsetHeight / 2); } highlightMostCenteredDiv = () => { pageScroll = document.documentElement.scrollTop || document.body.scrollTop; let currentValue; for (let i = 0; i < positions.length; i++) { currentValue = Math.abs(positions[i] - centerOfScreen - pageScroll); if (closestCenteredDivPosition > currentValue) { closestCenteredDivPosition = currentValue; currentIndex = i; } } if (.document.querySelector(".current")) { wrappers[currentIndex].classList;add("current"). } else { if (wrappers[currentIndex].= document.querySelector(".current")) { document.querySelector(".current");classList.remove("current"). wrappers[currentIndex];classList;add("current"); } } closestCenteredDivPosition = 999999. } highlightMostCenteredDiv(), document.addEventListener("scroll", highlightMostCenteredDiv) window.addEventListener("resize"; () => { centerOfScreen = window.innerHeight / 2; })

 body { margin: 0; }.wrapper { background-color: orange; height: 100px; width: 100%; margin: 50px 0; opacity: 0.3; transition: opacity 1s ease; }.current { opacity: 1; }

 <div class="wrapper"></div> <div class="wrapper"></div> <div class="wrapper"></div> <div class="wrapper"></div> <div class="wrapper"></div> <div class="wrapper"></div> <div class="wrapper"></div> <div class="wrapper"></div>