Position "sticky" does not work with luxy.js

Design help Custom code
22

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!

2021-02-26_06-17-12
2021-02-26_06-17-121908×933 55.3 KB
2021-02-26_06-16-55
2021-02-26_06-16-551919×921 53.6 KB
2021-02-26_06-16-26
2021-02-26_06-16-261915×747 49.5 KB

23

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
24

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.

25

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:

3 Likes
26

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

1 Like
27

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

28

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

2 Likes