如何解决IntersectionObserver有时会在不同亮度部分的固定标头上错过检测
我将this question中的代码进行了调整,以适应需要根据下面的背景滚动条更改标题链接的“亮度”的情况。
效果很好,但有时会感觉像视频中未检测到的一样:
// Change brightness
const changeBrightness = brightness => {
header.classList.remove('is-light','is-dark')
header.classList.add(brightness === 'dark' ? 'is-light' : 'is-dark')
}
// Change header brightness depending on which area is scrolling under
const headerScrollDetect = () => {
if (typeof IntersectionObserver !== 'undefined') {
const { top,height } = header.getBoundingClientRect()
const options = {
rootMargin: `-${top}px 0px -${window.innerHeight - top - height}px 0px`,threshold: 0
}
const sections = document.querySelectorAll('[data-brightness]')
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
entry.intersectionRatio > 0 && changeBrightness(entry.target.dataset.brightness)
})
},options)
// Detect scroll on each sections
sections.forEach(section => observer.observe(section))
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。