Hello, how can I change the color of my logo in my header while the page is scrolling.
I would like to change from a transparent header with white text and logo to a white header with black text and logo when scrolling.
I am using Craft. Thank you in advance!
Hi @kitchencrafted
Emplement this tutorial : https://www.youtube.com/watch?v=AvFC03emVHU&t=196s
Hey,
This is pretty easy, many people use a scroll event listener to check the scrollY value with javascript but this is bad performance wise. What you should do is use the intersection observer api and you can add a sentinel somewhere which is a div that doesn’t visually appear but it intersects the viewport. When the viewport is intersected what will happen is you can add a class to the header and what I would do is use an svg logo and that way you can update the color properly.
So use the javascript InterSection Observer, not a scroll event listener, and use an svg image, you don’t need two png’s.