How do I make tool Bar background blur when over text

I want the tool bar at the top of my website to change the text color and background when its on different parts of my page. how do I do this.

How I have it currently set up. I this.

one solution would be to duplicate your navbar and have it in two styles and according to your page enable or disable it in the layerpanel.

Otherwise it is a bit of custom code, that is not that easy because you have to figure out a way to check WHEN to change the css-color-values of your nav bar.
So this would require some wider knowlegde in css and js…
The keyword would be Intersection Obeserver