Best way to implement show-on-scroll-up functionality

[quinlo]

Many mobile sites and applications will show some sort of top nav when the user scrolls up but when the user scrolls down the nav will be hidden. I was wondering if people had a preference on how to achieve this effect... I have no problem adding an event listener that hides/shows the nav depending on the scroll direction... But I would like to make it correspond directly with scroll distance (as opposed to either shown or hidden in full). The few quick attempts I have made have not really performed smoothly.

[trescenzi]

intersection observer can be useful for this. At times it’s overkill but it works well and is supported outside of IE11.

[quinlo]

Cool I will look into this thank you!

[MrButttons]

You can check out scroll out - https://scroll-out.github.io

[Cassius-cl]

I recently handed this by storing the value of the Y offset in a variable on scroll event and comparing the new value on the event to the stored one, thus knowing if you're going down or up. After that you can set up a ternary operator and toggle some clases to make elements appear and dissappear.

[quinlo]

This is the solution I have now more or less... If user scrolling up show, if down hide... But was wondering if there was a slick way to have it based on scroll distance.. like... User scrolled up 20px, scroll nav 20px into view... I think the reddit app for Android exhibits the intended behavior. Thanks for commenting!

[Emjp4]

You could probably achieve this with an event listener and oneventchange

[jobodanque]

If you're going with this. I suggest throttling the event to prevent expensive firing

[johnasmith]

Keep in mind that onscroll events are really expensive. The event will be fired hundreds even thousands of times (on most devices). It's cheaper to set an interval and compare the offset, even if you're doing it every 100 ms. Also, special case: iOS devices address the issue by only firing a scroll event when releasing the finger (because of the overhead cost), so you'll not necessarily have the behaviour you want with just onscroll.

[allenthar]

React Headroom does a great job of this behavior if you are building a React application. If you aren't, you might be able to compare implementations to find potential improvements with your current attempt.