After creating a navigation and header section that change color along with the hero text as the user scrolls down the page, I am facing an issue. I have provided a link to the working example on JSFiddle:
https://jsfiddle.net/mfen723/9swhejo5/35/
The problem is that I need to select all three icon bars used for the navbar toggler so they can also change color in sync with the nav, hero background, and text. However, I am unable to select all 3 icon bars simultaneously.
Currently, I am using the following function which utilizes document.querySelector. However, this method only selects the first matching element:
const heroIconBarScroll = document.querySelector('.icon-bar.bar-top', '.icon-bar-bar-middle', '.icon.bar-bottom');
window.addEventListener('scroll', () => {
if (window.scrollY >= 46) {
heroIconBarScroll.classList.add('hero-icon-bar-scroll');
} else if (window.scrollY < 56)
heroIconBarScroll.classList.remove('hero-icon-bar-scroll');
});
I tried using document.querySelectorAll instead, but it does not seem to select any of the icon bars. Any advice or suggestions would be greatly appreciated.