Position "sticky" does not work with luxy.js

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. GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax.

1 Like

thanks for this dude!

1 Like

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:

5 Likes

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. https://codepen.io/akapowl/pen/a959c4e8955ef38bc4fe43bf7adde621

1 Like

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.

Hi, to everyone that facing this problem, yes, luxy.js doesn’t support sticky element that we made in webflow, you can try locomotive.js that was mentioned by @George_Ershov , but I’ve found something new that I believe is better for this situation, it’s called Lenis.js, I read an amazing article about it here Smooth Scrolling Using Lenis.js ,

You can visit Lenis.js GitHub here Lenis.js GitHub,

Here is the code to apply it on webflow :

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@0.2.28/bundled/lenis.js"></script>

<script>
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
  direction: 'vertical', // vertical, horizontal
  gestureDirection: 'vertical', // vertical, horizontal, both
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false,
})

//get scroll value
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
  console.log({ scroll, limit, velocity, direction, progress })
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)
</script>

How to use : just copy and paste that code to your page, and publish, all the native animation we made in webflow won’t be affected

Hope this helps anyone that needed it :grin:

1 Like

@Juan_Prima - thank you for this, worked great for me! :pray:

1 Like

Unfortunately this option from Juan ruins side scrolling. :frowning: nevermind thanks anyway!

Here’s an alternate code snippet for smooth scroll, works great with sticky position.

1 Like