Hide header on scroll

[mattdown]

Hi all,

I wondered if anyone could help with a problem I'm trying to solve.

In this pen, there is a fixed position grey header at the top of the page that gets pushed off in direct relation to scroll as the user first lands on the page by using a timeline & scrolltrigger.

If the user then gets past the point where the header has moved off and they start scrolling back up the page, the header needs to drop down again into view somehow. This doesn't have to be in direct relation to scroll amount. It just needs to be visible.

I'm not sure whether I should be controlling this by adding extra classes to the header and then targetting that forcing in CSS or whether I can somehow reverse the timeline?

So in summary, if the user is scrolling back up the page, the header needs to be visible but for the first 150px of scroll downwards, it needs to move up in relation to scroll as if the header is in the flow of the markup.

This is a good example of what I'm trying to achieve: https://loupemag.com/


 

See the Pen NWRoZvp by mattdown2478910 (@mattdown2478910) on CodePen

[mikel]

Hey @mattdown,

 

You could use a callback that gets called every time the progress of the ScrollTrigger changes: observing the direction.

 

See the Pen zYBawGa by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[mattdown]

Thanks for the suggestions so far Mikel. That has given me a few ideas so far.

The only thing that differs in your example is that the header doesn't move off in direct relation to scroll amount though which is the key thing that I need to achieve.

It's as if I need the timeline to be attached to scroll position if the user is near the top 150px of the page but then just play forward or back if they're lower on the page as per the example link.

[mikel]

44 minutes ago, mattdown said:

the header doesn't move off in direct relation to scroll amount

 

If you shorten the duration e.g. to 0.1, the animation runs as in your example.

The progress of the animation is not linked directly to the scroll.

 

Happy scrolling ...

Mikel

 

[mattdown]

@mikel Based on your example and suggestion, I think I'm getting somewhere now with this.

It seems to judder a bit on first part of scroll though and seems to rewind the timelime and play it again when it doesn't need to if the user is scrolling back up and the header is already in view. Updated pen:

[mikel]

 

Hey @mattdown,

 

"It seems to judder a bit ...":  With the two scroll triggers for the same object, you trigger a classic conflict.