Sticky header with show/hide and docking

[unpotatoes 1 Likes (Newbie)]

The effect I'm trying to build is a header that hides when you scroll down and shows when you scroll up. It should also dock in its original position (indicated by a pink bar in my demo) when you scroll all the way to the top. The show/hide effect is working great. However, I'm having two problems:

1. When I scroll to the top, the docking only works well when I scroll very slowly. Otherwise there is a lag, and the header pops into position instead of scrolling with the page.
2. When I scroll down from the very top, there is a moment when the header pops into frame and then tweens back into its expected position.

Grateful for any assistance!

See the Pen KKyKZyx by ericchenry (@ericchenry) on CodePen

[elegantseagulls 1,245 Likes (Superhero)]

I don't think this will be good for performance. You are adding to/resetting your gsap.timeline on every wheel move, you may want to add some conditionals to limit those (like setting current direction, and if that changes run a standard gsap.to animation), you may also consider using ScrollTrigger, or position: sticky; to pin your navigation.

 

Here's an example of something I put together a while ago that uses a similar setup with conditionals for what I'm describing. It doesn't use GSAP, but that could easily be swapped in.

See the Pen VNmKEw?editors=0111 by elegantseagulls (@elegantseagulls) on CodePen

[unpotatoes 1 Likes (Newbie)]

That was really useful. You inspired me to look into uturn (from New York Times and recommended in another post by @mikel), and now I have a much higher performance solution. Thanks, @elegantseagulls!