toggleClass based on scroll direction

[amit95]

I came across a demo from Greensock which showcased a fixed header which disappears on scroll down, but appears again on scroll up.

 

Expanding on that demo, I have added a class on scroll which I want to appear on the header when scrolling up.

 

However, as you will see in the demo, the fixed class is applied when scrolling down initially, making the black background visible momentarily before disappearing.

 

Are there parameters I could pass to the toggleClass object to add the class on scroll up only? Although, I cannot see anything of the sorts in the documentation.

 

Only other avenue I can think of is using ScrollTrigger's callback methods, but unsure on if this is the best way to go about it?

See the Pen ExLWzoR by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo]

Hi @amit95,

 

Maybe this is closer to what you're looking for:

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

 

I think the best approach would be to create two different ScrollTrigger instances, one that starts right after the element disappears from the viewport in order to apply the the fixed class and the yPercent of -100 and another for detecting the scroll direction.

 

Hopefully this gets you on the right direction.

 

Happy Tweening!!!