ScrollTrigger show/hide Navbar on scroll up/scroll down

[rbdk]

Hello!

I've been trying to figure out a way of hiding my navbar on scroll down and then showing again as the user scrolls up using ScrollTrigger if possible.

 

I've seen the codepen linked above and had a little look in forums however what I'm after is to completely hide the Navbar whenever the user scrolls down, regardless of their yPosition within the document. In the codepen linked the Navbar only shows when the user reaches the top of the document.

 

Is there anyway to do this with ScrollTrigger?

 

(Sorry I haven't made a recreation, I'm a bit lost as to how to show what I mean better than the codepen provided)

 

Thanks so much,

Rob.

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

[akapowl]

 

Hey @rbdk - welcome to the forum.

 

1 hour ago, rbdk said:

I've seen the codepen linked above and had a little look in forums however what I'm after is to completely hide the Navbar whenever the user scrolls down, regardless of their yPosition within the document. In the codepen linked the Navbar only shows when the user reaches the top of the document.

 

That sounds like the demo below does pretty much what you are looking for, right?

(to be found on @GreenSocks 'ScrollTrigger How-To-Pens' collection on codepen)

 

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

 

 

 

Edit: Whoops - linked to the wrong pen at first - corrected now.

 

Edit 2: Also to be found on the ScrollTrigger demos-page.

 

 

[rbdk]

Oh amazing @akapowl!!

 

Thanks so much! I hadn't looked in the collection on codepen only forums/googling.

 

Really appreciate the help,

 

Rob