Jump to content
Search Community

Question about hiding header on scoll

jillianadriana test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hey GSAP friends,


I recently found this handy post/CodePen by @mikel , which was exactly the solution I needed. I have a header with 2 parts -- the top bar has social media and some other links -- and then the bottom part is the header where the logo sits, as well as the menu and I'm going to put a search box in the far left. On scroll down, I want to hide the bottom part of the header but keep the top part sticky.


I had tried using headroom.js but I couldn't figure out how to get the top bar to remain sticky. I also do prefer to use GSAP where possible because it gives me so much more control.


My issue is that when my menu opens, there's a bit of extra room to scroll down because the GSAP pushes the menu up, and I don't know how to fix it.


Here's a test page with 200vh of empty space so you can see what I mean.


Sidenote: I don't know why the logo isn't sitting properly in the header. It was working fine and then suddenly it shifted and I haven't been able to pinpoint the issue there, so if you happen to notice what's going on there, any help would be appreciated, but since I feel like it's a CSS thing, my biggest concern is the GSAP stuff.


Link to comment
Share on other sites

Heya! You'll need to stop the menu from resizing if the modal is open.


pseudo code


  trigger: "nav",
  start: "10px top",
  end: 99999,
  onUpdate: ({progress, direction, isActive}) => {
    if (direction == -1 && modalIsClosed) {
    } if (direction == 1 && modalIsClosed) {

Hope that helps!



(You've got a ton of padding shifting it out of the layout btw)

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.
  • Create New...