Jump to content
Search Community

make element fixed/absolute when div appears on screen

archimedo test
Moderator Tag

Recommended Posts

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

  • 5 months later...

 

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

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...