Back to all resources
DOM manipulation
event handling
scroll events
dynamic styling

Navbar color change depending on hovered section

By Digipop
This JavaScript code defines a function updateColor that updates the CSS class of a list of DOM elements to reflect a new color class, removing any previous color-related classes. It then sets up an event listener on the window object to handle the scroll event. As the user scrolls through the page, the code checks if any of the sections with a data-color attribute are currently visible at the top of the viewport. If a section is visible, it retrieves the color class from the data-color attribute and applies this new class to two sets of elements, identified by the classes .element-class1 and .element-class2, using the updateColor function.