fixed header toggle on scroll

[darkgr33n]

Hey,

 

Using

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

as the basis, I've got a menu bar that move's offscreen on scroll down and back into view on scroll up.

Using another ScrollTrigger, it also changes the menu background so that its transparent on the first section and opaque in the subsequent sections.

 

The final piece of the puzzle, which is what i'm struggling with, is trying to ensure that, when top of the first section is at the top of the viewport (ie, we're at the top!), the menu bar should be an additional, say, 100px from the top of the screen. 

 

I can add a y:100 into the second tl timeline, but it obviously interferes with the the first timeline trying to scroll the menu out of view.

Should I add a third scrollTrigger to watch for that ? I've already got two scrolltriggers on one element and i think i'm going down a bit of a rabbit hole!
 

 

See the Pen poQbMEE by darkgr33n (@darkgr33n) on CodePen

[Rodrigo]

Hi,

 

Why not just wrap the header and animate that wrapper's yPercent and depending on the section change the height of the wrapper. Animating 100px of height shouldn't cause a performance nightmare especially if you don't add fancy stuff like shadows, filters and such:

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

 

Occam's razors, sometimes the simplest solution is the best one

 

Hopefully this helps.

Happy Tweening!

[darkgr33n]

Thanks for your help Rodrigo, I was a little lost as to how best to tackle this, but your reply certainly helped me look at it in a different way 

 

I needed the background transparency animation from my original pen though, and after a bit of messing about, it became obvious that I really needed to separate the change in height from the background transparency so I could involve some kind of scrub on the height change, otherwise it felt a bit jerky.

I think i've achieved this now but i'm not sure how well its constructed, but it seems to work at least!

See the Pen XWyjXOq by darkgr33n (@darkgr33n) on CodePen

 

[Rodrigo]

Hi,

 

Yeah I don't see anything that could be a cause of problems or concerns in your code. If it ain't broken don't fix it

 

Is great that is working they way you want! 🙌

 

Happy Tweening!

[darkgr33n]

Thank you Rodrigo

 

All the best