使用 javascript 更改滚动时的背景颜色答案

【问题标题】：Changing background color on scroll with javascript使用 javascript 更改滚动时的背景颜色
【发布时间】：2021-03-11 20:47:20
【问题描述】：

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！

有什么建议吗？

【问题讨论】：

标签： javascript scroll colors background sections

【解决方案1】：

我会这样做的。

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>

【讨论】：

假设您希望第一部分是白色以外的颜色。这将如何运作？

【解决方案2】：

    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>

这似乎工作得很好！

【讨论】：

假设您希望第一部分是白色以外的颜色。这将如何运作？