我想复制'。color -class'从每个可见部分切换到body标签，并在新部分可见时切换该类，然后重复此过程。
例如:•复制'。当第1节或第4节可见时，将Black-bold '类添加到body标签。•复制'。当section 2或section 5可见时，将gray '类添加到body标签。•复制'。当第3节或第6节可见时，将白色粗体'类添加到body标签中。
body {
margin: 0px;
padding: 0px;
}
section {
width: 100%;
height: 400px;
padding: 100px;
}
.black-bold {
background-color: var(--siteBackgroundColor);
color: var(--paragraphMediumColor);
}
.grey {
background-color: var(--siteBackgroundColor);
color: var(--paragraphMediumColor);
}
.white-bold {
background-color: var(--siteBackgroundColor);
color: var(--paragraphMediumColor);
}
.black-bold {
--siteBackgroundColor: rgba(0,0,0,1);
--paragraphMediumColor: rgba(255,255,255,1);
}
.grey {
--siteBackgroundColor: rgba(238, 238, 238, 1);
--paragraphMediumColor: rgba(0,0,0,1);
}
.white-bold {
--siteBackgroundColor: rgba(255,255,255,1);
--paragraphMediumColor: rgba(0,0,0,1);
}<body>
<section class="section1 black-bold">
<p>section 1</p>
</section>
<section class="section2 grey">
<p>section 2</p>
</section>
<section class="section3 white-bold">
<p>section 3</p>
</section>
<section class="section4 black-bold">
<p>section 4</p>
</section>
<section class="section5 grey">
<p>section 5</p>
</section>
<section class="section6 white-bold">
<p>section 6</p>
</section>
</body>我自己解决了这个问题
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
const theme = entry.target.getAttribute("data-section-theme");
document.querySelector("body").classList.remove("black-bold", "grey", "white-bold");
document.querySelector("body").classList.add(theme);
}
}
});
const sections = document.querySelectorAll(".page-section");
for (const section of sections) {
observer.observe(section);
}body {
margin: 0px;
padding: 0px;
}
section {
width: 100%;
height: 400px;
padding: 100px;
}
.black-bold {
background-color: var(--siteBackgroundColor);
color: var(--paragraphMediumColor);
}
.grey {
background-color: var(--siteBackgroundColor);
color: var(--paragraphMediumColor);
}
.white-bold {
background-color: var(--siteBackgroundColor);
color: var(--paragraphMediumColor);
}
.black-bold {
--siteBackgroundColor: rgba(0,0,0,1);
--paragraphMediumColor: rgba(255,255,255,1);
}
.grey {
--siteBackgroundColor: rgba(238, 238, 238, 1);
--paragraphMediumColor: rgba(0,0,0,1);
}
.white-bold {
--siteBackgroundColor: rgba(255,255,255,1);
--paragraphMediumColor: rgba(0,0,0,1);
}<body>
<section class="page-section section1 black-bold" data-section-theme="black-bold">
<p>section 1</p>
</section>
<section class="page-section section2 grey" data-section-theme="grey">
<p>section 2</p>
</section>
<section class="page-section section3 white-bold" data-section-theme="white-bold">
<p>section 3</p>
</section>
<section class="page-section section4 black-bold" data-section-theme="black-bold">
<p>section 4</p>
</section>
<section class="page-section section5 grey" data-section-theme="grey">
<p>section 5</p>
</section>
<section class="page-section section6 white-bold" data-section-theme="white-bold">
<p>section 6</p>
</section>
</body>