how to make the menu bar that changes color as it goes down in html

Issue

In this website "https://www.armoli.com" as you can see, the menu is transparent at first and integrated with the image on the back, but its color changes as you scroll down.how can I do this in html?(with css and js)

Solution

I think You will have to use Intersection Observer API. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Much better than listening to scroll event.

(it is an API that helps you listen to an element in the DOM (can be an array). and it triggers when that element appears on the screen. then you manipulate the DOM depending on what appears there.

Check this tutorial: https://www.youtube.com/watch?v=T8EYosX4NOo

Answered By - Rafaa Ferid