Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Sticky header with show/hide and docking

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.