Streaming live at 10am (PST)

Position "sticky" does not work with luxy.js

I created a simple structure with sticky elements and luxy.js- all seems to work fine.
The problem is somewhere else…

You can give a read only link?

Your luxy.js didn’t work, you need to invest it so that it works


Why do you think it didn’t work? what are you circling over there? :smile:
(your script targets an ID, not a class )

How can I fix it? I just don’t understand :joy:

I am not sure as well :smiley:

The problem is something else.
I would suggest to back all up, and delete element by element until you find the one that makes the problem.

The problem was found in luxy.js, but I can not remove it :thinking:

1 Like

Im having the same issue… position sticky breaks when I have Luxy.js did you ever find an answer?

1 Like

There is an answer, it can be done through the locomotive js library, but it’s pretty difficult, since I’m new to the code.

1 Like

thanks for this dude!

you know how to connect locomotive js?

Did you get it to work?

you will never make ‘Sticky’ work together with the ‘luxy’ script.
Because there is positioning absolute inside the script and there is a conflict of scripts.
You can achieve smooth scrolling + sticky using two GSAP libraries (GreenSocks ScrollTrigger plugin + locomotive scroll) just like I did for my test site.
on the second block I fix the pictures on the right, and the text on the left continues to scroll

1 Like

Nice, looks great! Do you maybe have a read-only link?

Looks beautiful, George!

Been stumbling over the GSAP solution as well but I have no idea how to integrate it so far. Would you mind sharing a few details on your implementation?

@tommyboy82 @avivtech @bashar @Aleksey @WooodSI Hi All. I can’t show that project because my account is not paid and access is denied. But I can show you my landing page that works and please don’t copy the design and use the code only as part of the training :slight_smile: (or this is my lending in which I use locomotive scroll + GSAP to create smooth scrolling. The locomotive library has a lot of features, including sticky elements. I’m showing this project which will serve as a starter. In addition, there are already videos on YouTube showing how to connect locomotive js. It’s done exactly the same way in webflow. There are classes, there are attributes, etc.

You’ll probably be a little confused, but you’ll figure it out. The most important thing is the attributes. Don’t forget to set them. As for the sticky element, but you’d better go to GreenSock and search the forum. I asked a question, got an answer and learned this library and now I can do wonders. You should be able to do the same.
By the way, here is my post on GSAP where a wonderful person helped me with code implementation. ScrollTrigger sidebar pinned overlaid sections - GSAP - GreenSock

Good luck to you! With love from Russia.

P.S. If you happen to need a webflow developer I will be glad to work with you :slight_smile:


Hey! thanks for the info, smooth scrolling works perfect, but sticky element doesn’t work. :pensive: I’m not a programmer, it’s hard for me to understand how to do it myself. if you help, I will be grateful!

The sticky element is made with the GSAP library
I sincerely recommend that you study this example very carefully. The only difference is that it uses a different library for smooth scrolling. But it does not change the essence.

I made luxy.js and my navbar with position:fixed smoothly working in SvelteKit using “portal” method with “use:” directive. in vanilla js you can just appendChild to the body and it will not be influented by div with luxy id.