我想让 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 )
最佳答案
您可以使用 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>
关于javascript - 滚动时更改 div 不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73878014/