How to change SVG color when I reach the bottom of the page

Question

Have a react page and I want the SVG to change from black to white at the bottom of the page. Is there a way I can do this in react? The div container at the bottom of the page is not the parent div for the svg. The SVG is part of a stickied header

Answer 1

To detect if a user has reached the bottom of a page you can attach an event listener to the scroll event and compare a node's scrollHeight, scrollTop, and clientHeight properties. Read answers to a similar question to see exemplary implementations.

Answer 2

In reality this is not so much related to react as to the SVG itself.

My question would be, is your SVG included as an <img ...> tag or inline.

If it's an image tag you could use filters.

But if your SVG is a complex image with different colors, I would recommend you converting it to a component and using it as inline code.

That way you have way more control on what's happening with the SVG and then you just modify the path or shape's fill to fill: white.

As for when it gets to the bottom there are different options, you could check scroll position compared to viewport height or if you want something more specific you could use something like React Waypoint.