如何解决使用javascript更改滚动时的背景颜色
https://codepen.io/tobiasthaden/pen/OVWKjm
$(window).scroll(function() {
$('section').each(function(i) {
if ($(this).position().top <= $(window).scrollTop()) {
$('body').css('background-color',$(this).attr('data-color'));
}
});
});
希望使用常规的旧 javascript 复制这种效果。我不想使用 jQuery!
有什么建议吗?
解决方法
const sections = document.querySelectorAll('section')
window.addEventListener('scroll',function() {
sections.forEach(section => {
const distFromTop = document.body.scrollTop + section.getBoundingClientRect().top
if (distFromTop < 10) {
document.body.style.background = section.dataset.color
}
})
})
body {
transition: background-color .2s ease;
}
section {
height: 100vh;
}
<section data-color="white"></section>
<section data-color="green"></section>
<section data-color="purple"></section>
<section data-color="yellow"></section>
<section data-color="blue"></section>
<section data-color="white"></section>
这似乎工作得很好!
,我会这样做的。
const sections = document.querySelectorAll('section')
document.addEventListener('scroll',() => {
sections.forEach(section => {
if(section.getBoundingClientRect().top <= document.body.scrollTop) {
document.body.style.background = section.dataset.color
}
})
})
body {
transition: background-color .2s ease;
}
section {
height: 100vh;
}
<section data-color="white"></section>
<section data-color="green"></section>
<section data-color="purple"></section>
<section data-color="yellow"></section>
<section data-color="blue"></section>
<section data-color="white"></section>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。