ScrollTrigger refresh

[TrulyNewbie]

Hi, on my website, I have a slider that changes height, so when it's clicked the footer is cut off. So I made a small demo.

 

When I click the button, the fixed .box in the background scroll triggers reset. So it fades back in.

How can I make it so it when I click the button that triggers the ScrollTrigger refresh,  the .box div isn't affected?

 

I've tried, toggleActions, and invalidateOnRefresh: false

 

Thank you for any help

See the Pen OJQrZbm by NewbieRuby (@NewbieRuby) on CodePen

[GreenSock]

I'm struggling to understand why you would use a position: fixed element as a trigger. It doesn't scroll with the page, so what would you expect it to do in terms of triggering? 

 

When you do a ScrollTrigger.refresh(), it of course re-calculates all the start/end positions but in the scenario you described, you've already scrolled down but the position: fixed container doesn't move, of course, so now the start/end would be calculated according to that position. 

 

If you want it to trigger at the very top of the page, just give it a numeric value like start: 0 or start: 1 which is absolute. No need for a trigger at all. 

 

See the Pen PoQXdWp?editors=0110 by GreenSock (@GreenSock) on CodePen

 

And why were you setting the height to something invalid like this?:

container.style.height = ScrollTrigger.refresh()

 

[TrulyNewbie]

1 hour ago, GreenSock said:

I'm struggling to understand why you would use a position: fixed element as a trigger. It doesn't scroll with the page, so what would you expect it to do in terms of triggering? 

 

When you do a ScrollTrigger.refresh(), it of course re-calculates all the start/end positions but in the scenario you described, you've already scrolled down but the position: fixed container doesn't move, of course, so now the start/end would be calculated according to that position. 

 

If you want it to trigger at the very top of the page, just give it a numeric value like start: 0 or start: 1 which is absolute. No need for a trigger at all. 

 

 

 

 

And why were you setting the height to something invalid like this?:

container.style.height = ScrollTrigger.refresh()

 

Thank you for your help. I didn't consider that a fixed element could not be a trigger . Thanks

 

And - "And why were you setting the height to something invalid like this?:" That was an accident, I was playing around with ideas and must've accidentally hit save.