Instead of scrolling, shrink top section of page until it reaches a certain size, then allow scrolling

So, the top of my page is a full-page (100vw x 100vh) div with a (let's say 100)px fixed navbar at the top. When the user is at the top of the page and tries to scroll, I'd like them to remain at the top of the page, but for the top div to shrink in response to their scrolling, until such point as the div becomes the height of the navbar and essentially becomes the background for it; then, scrolling can continue as normal.

When the user scrolls back up, I'd like the process to reverse and the div to return to full size. I really hope there's a pure CSS solution for compatibility and responsiveness's sake, but JavaScript works great too.

I've been working on a JavaScript solution with the littlest bit of heavily flawed success - I've been using $(window).scroll(), getting the distance scrolled, shrinking the div by that, and then e.preventDefault() or window.scrollTo(0,0). This is a really dirty solution that doesn't work well at all in most cases, and I'm at a loss for a better one...

Thanks so much for any help!