archimedo Posted November 2, 2020 Share Posted November 2, 2020 Hi everyone, I'd like to make a text fixed only when scrolling on a certain div (block2 class in my example). I was thinking that scrolltrigger plugin could be useful to achieve that, but unfortunatley I couldn't work it out. Basically I'd like the text to be fixed (in the same position as the starting absolute one) and then make it scrollable again when the green block appears on the top or when the blue block appears on the bottom. Can you help me understand how to achieve this effect with scrolltrigger? Thank you! See the Pen YzWLrWP by archemede (@archemede) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted November 2, 2020 Share Posted November 2, 2020 Hey @archimedo, Do you expect this to happen? See the Pen 776c7d4c20cb39e2edcdcb8d0dc6e992 by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 2 Link to comment Share on other sites More sharing options...
archimedo Posted November 2, 2020 Author Share Posted November 2, 2020 Thank you very much for your reply, that was very helpful! Is there a way to make the text reapper when scrolling up again after reaching the end instead of going all the way back to the div? Thanks! Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 2, 2020 Share Posted November 2, 2020 Honestly you should just use position: sticky. If you want to pin something and animate it or you have a more complex situation then ScrollTrigger can do that. But for this effect alone there's no need for ScrollTrigger See the Pen wvWXvoX by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Christiemade Posted April 20, 2021 Share Posted April 20, 2021 What if you want it to be sticky across multiple divs, but also be able to reverse back up and stick then, too? (Section 2 stays sticky through section 3) See the Pen eYgPQRL?editors=1111 by christiemade (@christiemade) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted April 21, 2021 Share Posted April 21, 2021 11 hours ago, Christiemade said: What if you want it to be sticky across multiple divs, but also be able to reverse back up and stick then, too? (Section 2 stays sticky through section 3) You could use a simple pinning ScrollTrigger for that and set pinSpacing to false. See the Pen 84de2a127e5a7615cca425d9b83fbf8d by akapowl (@akapowl) on CodePen 2 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