Jump to content
Search Community

Question about hiding header on scoll

jillianadriana
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

jillianadriana
Posted

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.

 

Posted

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

 

pseudo code

 

ScrollTrigger.create({
  trigger: "nav",
  start: "10px top",
  end: 99999,
  onUpdate: ({progress, direction, isActive}) => {
    if (direction == -1 && modalIsClosed) {
      actionNav.reverse()
    } if (direction == 1 && modalIsClosed) {
      actionNav.play()
    }
  }
});


Hope that helps!
 

 

image.png

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

Posted

That was just pseudo code - not a snippet to copy paste.

 

Have you defined a modalIsClosed variable?

Please provide a minimal demo if you'd like more help - thanks!

jillianadriana
Posted

THANK YOU! I could've spent days trying to figure this out.

  • Like 1
Posted

No worries! That menu is lovely too by the way. Nice job.

  • Like 2

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...