search

last-train / website

A website for the last train podcast 🎙
https://thelasttrain.fm
MIT License
2 stars 0 forks source link

Hide navbar when scrolling show, show when scrolling up #18

Closed peterweckend closed 3 years ago

github-actions[bot] commented 3 years ago

Visit the preview URL for this PR (updated for commit 05bb867):

https://last-train-pod--pr18-dynamic-navbar-ox0ontxk.web.app

(expires Wed, 31 Mar 2021 21:47:04 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

tiakindele commented 3 years ago

Visit the preview URL for this PR (updated for commit 21dd1fb):

https://last-train-pod--pr18-dynamic-navbar-ox0ontxk.web.app

(expires Mon, 15 Mar 2021 04:04:13 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

@peterweckend tested the above link on mobile and it didn't work. confirm on your end.

peterweckend commented 3 years ago

Visit the preview URL for this PR (updated for commit 21dd1fb): https://last-train-pod--pr18-dynamic-navbar-ox0ontxk.web.app (expires Mon, 15 Mar 2021 04:04:13 GMT) 🔥 via Firebase Hosting GitHub Action 🌎

@peterweckend tested the above link on mobile and it didn't work. confirm on your end.

Doesn't work for me either, looking into it

peterweckend commented 3 years ago

So I found out why it doesn't work on mobile. It's because scrolling up and down on mobile is way more fluid than on browsers. Ex: when youre at the top of a safari page and you try to scroll higher the page will scroll down but then bounce back up. Or you scroll and then you stop it with your thumb and the page scrolls up and down a tiny bit when your thumb touches the screen. So little animation stuff like that is triggering the scroll listener constantly and its firing like thousands of times. I could just disable it on mobile (which is what a lot of sites seem to do) but im gonna try seeing if I can throttle the number of times the scroll listener fires, cause thatll be a good js exercise

peterweckend commented 3 years ago

Ready for review. I have yet to find a way to get it to work on mobile devices. I've tried throttling the event listener calls, I've tried all sorts of weird pixel math calculations, I've tried playing with react hooks, but so far nothing. So I've limited it to only show/hide on non-touchscreen devices and to always show on touchscreen devices until we can find a way to get it to work for those

peterweckend commented 3 years ago

on the bright side i did learn a lot about the react effects and hooks