'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.

javascriptcsssvg


Solution 1:[1]

You can use the document.body.clientHeight property to get the full height of your webpage in pixels then multiply it by 0.5 to get the 50% of it's total height

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anurag Samota

Related Questions