Changing fill color of SVG on scroll

I have an SVG which is sticky, within a column that streches from top to bottom of the website.

How do I change the fill colour of the SVG when at exactly 50% of the way down the page on scroll?

I can see how it can be done with javascript when scrolling a defined number of pixels down the page, but I need percentage of page.

I would show my workings so far, but so far I have completely drawn a blank.

Any help would be appreciated.