ScrollTrigger with changing variable based on window Size

[Christiemade]

I have an announcement bar that lives overtop of a header bar, and I want the header bar to stay sticky once it reaches the top.  This works fine, EXCEPT when you scale down the window.  Then the announcement height changes, which changes how much the header bar needs to animate to reach the top.  I got this ALMOST working, except now what happens is - if you load the window, then resize it smaller, then scroll down, everything is great, but the minute you scroll back up the variable that keeps the announcement bar height seems to reset itself and mess up the alignment of the elements on the page. I need help figuring out what I'm doing wrong here!

See the Pen zYPWYwa by christiemade (@christiemade) on CodePen.

[akapowl]

Hello Christie,

 

you're gonna want to have a look at invalidateOnRefresh for the ScrollTrigger in combination with using function-based values for your tween.

 

invalidateOnRefresh

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

 

 

See the Pen oNoqNMr by akapowl (@akapowl) on CodePen.

 

[Christiemade]

That's the magic right there. Thank you!