Jump to content


How to pin fixed item with ScrollSmoother active?

Recommended Posts

I haven't been able to find this exact scenario. I know I'm missing something, I tried cobbling together some things I saw on the forums.


Basically, I want the black box to be pinned as a fixed item via ScrollTrigger (that's why I have the trigger as the header, I just want it immediately pinned until I release it). 


Because I'm using ScrollSmoother I can't seem to have the item in a fixed position without being outside of the container, but I need it inside.


Any suggestions or directions to explore? Thanks.

See the Pen mdXOEJQ by chailandau (@chailandau) on CodePen

Link to comment
Share on other sites

Hi chailandau,


I'm a little confused about what you're trying to do. Can you make a demo of what you are expecting to happen without ScrollSmoother?

Link to comment
Share on other sites

Sure, I created this which is what I am trying to accomplish:

See the Pen gOvLMBO by chailandau (@chailandau) on CodePen


Then I went back and did the same thing on the ScrollSmoother version, which seems closer, but still not there:

See the Pen GRQNqeR by chailandau (@chailandau) on CodePen

Link to comment
Share on other sites

Gotcha. To replicate that, we would need to append the fixed item outside of the content because position: fixed won't work inside an element that has transforms on it, which is what ScrollSmoother does.


So this seems to work.


See the Pen GRQNjOj by GreenSock (@GreenSock) on CodePen


  • Like 1
Link to comment
Share on other sites

I see, thanks a lot for this solution, I guess I thought there was a simpler way of doing it but appending makes sense :)

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.