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

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)

CodePudding user response：

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

CodePudding user response：

You can probabbly do this using css and javascript, simply make two css classes with your different themes e.g.

.navbar_active {
    color: red;
}

.navbar_other {
    color: blue;
}

Then just use some javascript to add/remove the css classes, depending on the current scroll.

Edit: something like this sounds like what your looking for: Transitioning Affixed Navigation bar - CSS theres, even a fiddle you can try: http://jsfiddle.net/jv0qvvp2/1

basically the same approach as what i said, add/remove css classes depending on the current scroll position