How can I fix the issue with the "sticky" position not working in Webflow when using the luxy.js smooth scrolling on the wrap luxy, section 7, reviews holder?

When using luxy.js for smooth scrolling, the CSS "position: sticky" property often stops working because of how luxy.js alters the scroll behavior with transforms, which detach elements from the normal document flow.

​

1. Understand the Problem with luxy.js and position: sticky

• luxy.js applies transform: translate3d() or similar transform properties to the scroll container (e.g., .wrap, .luxy), which creates a new stacking context and breaks sticky positioning inside it.
• This affects any element with position: sticky inside sections like .section-7 or .reviews-holder.

​

2. Check the Affected Structure

• Confirm that the sticky element is a child of an element that’s transformed (which it likely is, due to luxy.js).
• If .wrap.luxy is transformed, any sticky positioning inside .reviews-holder (if nested within) won’t function as expected.

​

3. Fix Option 1: Move Sticky Element Outside Transformed Layers

• Move the sticky element (e.g., sticky content inside .reviews-holder) outside the transform stack.
• You can restructure your sections so the sticky element is a sibling to the transform layer, not a child.
• For example:
• Keep .wrap.luxy for parallax content only.
• Make .reviews-holder (and the sticky item) a sibling of .wrap.luxy, outside the luxy scrolling layer.

​

4. Fix Option 2: Disable luxy.js Where Sticky Is Needed

• If restructuring isn’t possible, disable luxy.js on the specific section (.section-7) where you need sticky to work.
• In the luxy.js init options, use the data-luxy-el attribute to exclude elements:
• Add data-luxy-el="excluded" on .section-7 or .reviews-holder.
• Modify your luxy.init() script to ignore these elements by targeting only the elements that need parallax.

​

5. Fix Option 3: Ditch position: sticky for JS-Based Alternative

• If you must keep animations and layout as-is, create custom sticky behavior with JavaScript that mimics position: sticky using scroll events.
• This is more complex and usually overkill unless design depends heavily on both sticky and luxy effects together.

​

Summary

Sticky doesn’t work inside containers transformed by luxy.js, such as .wrap.luxy, due to stacking context isolation. Fix it by either moving the sticky element outside the luxy layer, excluding sticky areas from luxy, or recreating the effect with JavaScript if needed.