Reducing div height while scrolling down

Reducing div height while scrolling down

I have a 100% height div (intro section of a one-page website) which height I want to reduce while scrolling down the page. I want to achieve that in a way that the top of the div is exactly at the top of the window while scrolling and after the div's height gets to == 0 I want to hide that div. I've tried a lot of different approaches to achieve that these several days but to no avail. Some help would be very much appreciated!