Pin header nav and hide/reveal based on scroll direction

[MCBS]

Hi everybody! In header I have a big image, and a navbar.
What I want: navbar has to exit from vewport, and when I scroll to top it has to slide down, becoming visible.

I tried pinning navbar, and using another scrolltrigger to slide it, but:

 - when pinned navbar does a "glitch", and jump (not a real problem, but ugly to see);

 - when I scroll to the top of the page, navbar still slided down

 

Sorry for my english, I hope it's all clear.

See the Pen JjzZzWV by smino (@smino) on CodePen

[mvaneijgen]

I'm not sure what you are asking and what everything is in your demo, but I've only kept the .navbar which has the "Sitename" in it. I've set that element to position: fixed in your css and move that off screen on page load. Then when the start triggers meet in scrolls in and then when the start triggers onEnterBack it reverse the timeline. Hope it helps and happy tweening! 

 

See the Pen JjzZVwN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

The problem with your demo is that you have two different ScrollTrigger instances, no need for that as far as I can see, just one should suffice for what you want to do. Also you're pinning the menu bar but not setting pinSpacing to false, that creates some padding in the bottom which makes it work in an odd fashion.

 

I forked your demo:

See the Pen ExMpxPe by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[MCBS]

On 2/6/2024 at 3:28 PM, Rodrigo said:

Hi,

 

The problem with your demo is that you have two different ScrollTrigger instances, no need for that as far as I can see, just one should suffice for what you want to do. Also you're pinning the menu bar but not setting pinSpacing to false, that creates some padding in the bottom which makes it work in an odd fashion.

 

I forked your demo:

 

 

 

Hopefully this helps.

Happy Tweening!

 

You're right, this looks much better now!

Last question: what about the "extra space" from red site logo and white navbar? After scrolling, if you go back on top of the page, you'll see that navbar is more distant than before, because of "yPercent" animation. I don't understand how to fix it.

 

[mvaneijgen]

Just revers the tween on the onLeaveBack callback. Hope it helps and happy tweening! 

 

See the Pen yLwRXZz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[MCBS]

Great! Thank you very much!