How can I implement smooth scrolling using Locomotive.js in Webflow while ensuring position sticky functionality is working correctly?

TL;DR

Add Locomotive Scroll CDN (JS & CSS) in Webflow's Project Settings and wrap your scrollable content in a div with data-scroll-container.
Initialize Locomotive Scroll in the Before </body> section using the appropriate script targeting that container.
To maintain position: sticky, avoid transforms on parent elements, or use data-scroll-sticky and data-scroll-target on inner elements inside a position: relative wrapper.
Call scroll.update() after Webflow interactions that change the layout to ensure Locomotive re-calculates correctly.

To implement Locomotive Scroll in Webflow with working position: sticky elements, you must integrate it carefully since Locomotive uses a custom scroll container that disrupts native browser behavior.

1. Add Locomotive Scroll to Your Project

Go to Project Settings > Custom Code > Head and paste the CDN link for Locomotive Scroll (JS and CSS).
Example CDN links:
CSS: https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css
JS: https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js
Or upload locally to the assets panel and reference accordingly.

2. Set Up the Scroll Container

Wrap your entire page (excluding nav/footer if not part of the scroll) in a div and give it the attribute:

data-scroll-container

This container must act as the scrollable area for Locomotive to manage.
Common class name used: .smooth-scroll

3. Initialize Locomotive Scroll

Inside Page Settings > Before </body> tag, add the initialization script:
Ensure it runs after the page and Webflow interactions are loaded.
Example:

```javascript

const scroll = new LocomotiveScroll({

el: document.querySelector('[data-scroll-container]'),

smooth: true

});

```

4. Fix `position: sticky` Issue

Locomotive Scroll uses transform: translate3d on the scroll container, which breaks position: sticky.
To fix this:
Do not set transform styles on sticky parent elements.
Instead of applying Locomotive to body, use a scroll wrapper and leave sticky elements outside that container.
Or, target sticky elements and add the attribute:
- data-scroll-sticky: This lets Locomotive manage sticky behavior.
- Add data-scroll-target: Set the selector of the parent wrapper.

5. Apply Sticky with Locomotive-Compatible Structure

Wrap your sticky element like this:
Outer wrapper: e.g. div.sticky-parent with position: relative
Inner sticky element: e.g. div.sticky-element with:
- data-scroll
- data-scroll-sticky
- data-scroll-target=".sticky-parent"

6. Update Locomotive on Scroll-Triggered Changes

If you're using Webflow interactions that add/remove elements or affect layout:
After those run, call scroll.update() to recalibrate the Locomotive layout.

Summary

To use Locomotive Scroll with position: sticky in Webflow, wrap your content in a data-scroll-container, initialize Locomotive with custom smooth settings, and use data-scroll-sticky and data-scroll-target attributes to control sticky behavior. Avoid conflicts caused by transformed parents to maintain native or emulated sticky functionality.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer