TrulyNewbie Posted June 13, 2022 Share Posted June 13, 2022 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 13, 2022 Solution Share Posted June 13, 2022 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() Link to comment Share on other sites More sharing options...
TrulyNewbie Posted June 13, 2022 Author Share Posted June 13, 2022 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now