I'm in the process of implementing sticky navigation on my website that will dynamically change as users scroll through different sections. Specifically, when scrolling over a section marked with the class .dark, I want the logo and text color to switch to white, otherwise remain black.
The javascript snippet I've been utilizing is provided below. However, it seems to only affect the first element with the class .dark. How can I modify this code to target all elements with the same class?
window.addEventListener('scroll', function () {
var sections = document.querySelectorAll('.dark'),
logo = document.querySelector('#logo-container').getBoundingClientRect();
sections.forEach(function(section) {
if (section.top <= logo.top + logo.height && section.top + section.height > logo.top) {
document.getElementById('logo-container').classList.add('white-logo');
document.getElementById('navholder').style.color = "#fff";
} else {
document.getElementById('logo-container').classList.remove('white-logo');
document.getElementById('navholder').style.color = "#111";
}
});
});
Apologies if this question seems basic, as my knowledge regarding Javascript is limited. Despite attempting to find a solution on my own, I have not made much progress. Any assistance with this matter would be greatly appreciated.