I’m building a site with a fixed header positioned at the top of the window. I’m trying to toggle a class to switch the color of the header when scrolling hover specific divs
with the class .is-dark
While scrolling, the header is hovering a div with the class .is-dark
, the color of header is white. If not, the color is black.
Here is the JS code, unfortunately doesn’t seem to work:
const header = document.querySelector(".js-header");
const sections = document.querySelectorAll(".has-dark-theme");
sections.forEach((section) => {
window.addEventListener('scroll', () => {
const fixed_position = header.offsetTop;
const fixed_height = header.offsetHeight;
const toCross_position = section.offsetTop;
const toCross_height = section.offsetHeight;
if (fixed_position + fixed_height < toCross_position) {
header.classList.remove('is-white');
} else if (fixed_position > toCross_position + toCross_height) {
header.classList.remove('is-white');
} else {
header.classList.add('is-white');
}
})
})
.site-header {
position: fixed;
width: 100%;
height: 3em;
top: 0;
left: 0;
color: black;
}
.site-header.is-white {
color: white;
}
.section {
width: 100%;
height: 100vh;
background-color: white;
}
.section.is-dark {
background-color: black;
}
<header class="site-header"></header>
<div class="section is-dark"></div>
<div class="section"></div>
<div class="section is-dark"></div>
<div class="section is-dark"></div>
<div class="section"></div>
<div class="section"></div>
2
Answers
You are not checking if the header is overlapping with any of these sections while scrolling.
Refer the attached code below for checking overlaping :
First look at the classes, there you need to specify not only the color but also the background color.
Then you don’t need to select elements every time you scroll. That’s not cool. In addition, you need to check the original position of the element during the page load, it may load against a white block or a black block. Take some of the code out of the loop and some of it into a function and you’ll have a good optimization at once