Streaming live at 10am (PST)

Position "sticky" does not work with luxy.js

Hello, please help! position “sticky” does not work when using luxy.js smooth scrolling .
location: wrap luxy — section 7 — reviews holder.

Read-only link: LINK

Hi Aleksey,

It is not the luxy.js - it is the overflow:hidden on the wrap luxy element.

Hi Avivtech, thanks for the answer, yes this is really due to “overflow: hidden”, but after publishing the “sticky” refuses to work

https://levina-group.webflow.io/

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

You can give a read only link?

https://preview.webflow.com/preview/luxy-js?utm_medium=preview_link&utm_source=dashboard&utm_content=luxy-js&preview=2f27484273f4bbcb4023833c6e73894e&mode=preview

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

image

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. https://github.com/locomotivemtl/locomotive-scroll

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. https://ge-studio.webflow.io/
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:
https://georgestudio.ru/ (or https://webstudio21.webflow.io/) 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.

https://preview.webflow.com/preview/webstudio21?utm_medium=preview_link&utm_source=designer&utm_content=webstudio21&preview=91ab952860ab2e7568962d290028ace4&mode=preview

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:

4 Likes