CODEWITHSUNDEEP
jqueryattrdocument-body
Houghtonator
Houghtonator

Reputation: 103

toggleClass from visible section to body tag

I would like to copy the '.colour-class' from each visible section to the body tag and toggle the class when a new section is visible and repeat the process.

For example: • Copy the '.black-bold' class to the body tag when section 1 or 4 is visible. • Copy the '.grey' class to the body tag when section 2 or 5 is visible. • Copy the '.white-bold' class to the body tag when section 3 or 6 is visible.

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>

Upvotes: 0

Views: 40

Answers (1)

Houghtonator
Houghtonator

Reputation: 103

I managed to solve it myself

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>

Upvotes: 0

Related Questions