tomekk Posted June 14, 2020 Share Posted June 14, 2020 Hi there, first of all thank you so much for having gsap and all the plugins to use!! Especially the scrollTrigger Plugin! Thanks for all that work. I am totally new to the forum, this is my first post, so hopefully i am doing everything right. If not, please let me know :). I am thinking of a case where i do have some content. After that something like a pre-footer-section (like a second navigation) and the footer itself will follow (see the codepen i provided). The pre-footer-section should stay sticky until its ghost appears and should then scroll up with the rest (like position sticky does). Is it possible to get that done with scrollTrigger? (i could use position: sticky, it would be perfect for this szenario, but if you need IE11 it will break...). Thank you in advance for your help, tomekk See the Pen VwejxGQ by tomsquared_tomekk (@tomsquared_tomekk) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted June 14, 2020 Share Posted June 14, 2020 Are you talking about something like this?: See the Pen 82070005286079c3cae60f5a2dee26b8?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
tomekk Posted June 15, 2020 Author Share Posted June 15, 2020 Hi jack, thank you so much for your reply. Yes its close to what i meant. In detail what i am trying to do is the same as what "position: sticky" does. In your example the sticky-container is overlapping the content before itself, when it reaches the position before the footer. I thought maybe theres a way with scrollTrigger, that it will preserve the space where the sticky-container will be without "position: fixed"... (and recalculate that in smaller screensizes). Do you understand what i mean? Heres an codepen/example with "position: sticky" and without gsap: See the Pen GRoqaQb by tomsquared_tomekk (@tomsquared_tomekk) on CodePen Is this posibble with scrollTrigger without realculating the space manually for the sticky-container that gets "position: fixed"? Link to comment Share on other sites More sharing options...
GreenSock Posted June 15, 2020 Share Posted June 15, 2020 Oh sure, if I understand you correctly you could just adjust the paddingBottom of your main container accordingly. Putting it in an onRefreshInit callback ensures it gets evaluated whenever there's a resize and the results will get factored into the positioning of the ScrollTrigger. I adjusted the codepen from earlier: See the Pen 82070005286079c3cae60f5a2dee26b8?editors=0010 by GreenSock (@GreenSock) on CodePen Is that the behavior you want? 1 Link to comment Share on other sites More sharing options...
tomekk Posted June 15, 2020 Author Share Posted June 15, 2020 Hi Jack yes, thats exactly what i am trying to get solved. Thank you so much for your well explained answer. And also its really great, how fast you guys reply! 1 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