Measure scroll speed and set CSS transition to match about react-headroom

[KyleAMathews]

The idea is it should feel like you're uncovering the header by scrolling up not that it over eagerly jumps out at you. Perhaps even don't finish animating down if the user stops scrolling.

[KyleAMathews]

Well, this wouldn't make things any slower as we're already getting scroll info. Just have to start measuring scroll velocity and dynamically setting transition time (based on height of header). So pixels/second matches scroll.

[KyleAMathews]

Not sure when I'll get to this so if someone wants to take a crack it that'd be awesome!

[KyleAMathews]

Idea originally from Andrew Ingram https://twitter.com/andrewingram/status/783597575509307392

[AndrewIngram]

Might not have to read the DOM if we can accurately calculate deltas from the scroll event itself. I've usually done it by reading scrollY, but that's pretty flaky anyway because of things like bounce effects at the scroll extremes.

[KyleAMathews]

Oh true. But in any case, I was thinking clearly as this module is already measuring scroll events and page offsets so adding your cool idea wouldn't make anything slower.

[geohuz]

I found the demo in this url: https://osvaldas.info/auto-hide-sticky-header is doing exactly like your description, it looks more nature. BTW, I have a question of how to make the scrolling head effect as 'slide up' and 'slide down', not just move it off the page and into the page? As described in the google scrolling techniques: https://material.google.com/patterns/scrolling-techniques.html#scrolling-techniques-app-bar-scrollable-regions, the video in the behavior section.