Sticky webflow cms list

Make CMS items stack like a layered storyboard. This tiny script stagger-positions each .sticky_item with a calculated top so they pin in a clean vertical cascade as you scroll.

‍

✅ What This Does

• Staggers sticky items with automatic % offsets
• Mobile/desktop-aware (switches steps at your breakpoint)
• Recalculates on resize (debounced), zero scroll listeners
• Works with any number of lists: sticky_list, sticky_list_2, …
• No dependencies, one file, MIT license
  ‍

🛠️ How to Use It in Webflow

1. Structure your markup

Add a container whose class starts with sticky_list and place your sticky items inside as .sticky_item.

You can tweak spacing with data-attributes.

<div class="sticky_list"
     data-base-offset="8"
     data-offset-step="1.5"
     data-mobile-step="1.1"
     data-mobile-breakpoint="768">
  <div class="sticky_item">A</div>
  <div class="sticky_item">B</div>
  <div class="sticky_item">C</div>
</div>

Multiple lists? Just add more containers like sticky_list_2, sticky_list_3, etc. Each can have its own data options.

2) Make the items sticky in CSS

.sticky_item { position: sticky; }

‍

3) Include the script (Before </body>)

After you create the GitHub repo and tag a release (e.g. v1.0.0), drop this in:

‍

✅ Options (data-attributes)

| Attribute                | Default | What it controls                                                      |
| ------------------------ | ------: | --------------------------------------------------------------------- |
| `data-base-offset`       |     `8` | Starting `%` for the first item’s `top`                               |
| `data-offset-step`       |   `1.5` | Step `%` added per item on desktop                                    |
| `data-mobile-step`       |   `1.1` | Step `%` per item on mobile (falls back to `data-offset-step` if set) |
| `data-mobile-breakpoint` |   `768` | Width (px) below which the mobile step is used