Sidebar sticky with Scrolltrigger and ScrollSmoother

[Superloop 2 Likes (Newbie)]

Hi!

I'm trying to make a sidebar like Adidas makes: https://www.adidas.es/zapatilla-ozweego/FX6029.html
I need to use SmoothScroller. Without this plugin I would know how to do it with CSS sticky, but with SmoothScroller I can't find a way...

When you scroll down, the sidebar stays fixed below (like my codepen) and when I scroll up the sidebar goes up with the scroll.

I don't know if it's possible to do this with ScrollTrigger.

Anybody can help me?

Thank!! :)

See the Pen zYLjjNO by superloop (@superloop) on CodePen

[elegantseagulls 1,409 Likes (Superhero)]

You'll want to use
 

start: "top top",
end: 'bottom bottom',

to prevent the right content from scrolling too soon. You'll also, then, need to set a specific scrollable area for the content in the right rail.

This thread maybe very helpful too:

 

 

[Superloop 2 Likes (Newbie)]

@elegantseagulls thanks for you answer.

I don't want to have a nested scroll for the content in the right. The scroll must be the same that the scrollbar page. It's like the pin is in the two sides (top and bottom). When the sidebar is pinned and you scroll to up, it's like the sidebar is not pinned.

I don't know how to explain  I can not do a example more similar than adidas page (https://www.adidas.es/zapatilla-ozweego/FX6029.html)...

[Rodrigo 5,079 Likes (Superhero)]

Hi,

 

Maybe you're looking for something like this:

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

 

Hopefully that's enough to get you started. Let us know if you have more questions.

Happy Tweening!

[elegantseagulls 1,409 Likes (Superhero)]

On 1/26/2023 at 10:20 AM, elegantseagulls said:

You'll want to use
 

start: "top top",
end: 'bottom bottom',

Did you try this?