How to use Webflow & Sticky.js

Community resources Webflow Tips
1

Webflow already supports sticky-position, set the div to sticky and the wrapper position to relative.
Its better first to solve this issue by webfow core options.

For extra control (Change margin-top, add a class when the sticky is true and so) - try this plugin.

Less than one-minute solution:

“Simple Solution (~1.67kb code)”:

Sticky-js is a library for sticky elements written in vanilla javascript. With this library you can easily set sticky elements on your website. It’s also responsive.

DESIGNER SIDE

Start point:

image
image1915×727 46.5 KB

Select the green “ugly” div hh, and add sticky element by custom attribute

  • Name: data-sticky
  • Value: sticky

image

Why not class? I don’t want to add unwanted “extra” combo classes:
image

Add container wrapper (Very Veryyyyyyyyyyyy useful) **

**not mandatory.

Go to some-div parent and add data-sticky-container

  • Name: data-sticky-container
  • Value: data-sticky-container

image

CODE SIDE

Including file & Initialization by attribute selector.

https://css-tricks.com/almanac/selectors/a/attribute/

copy-paste before body (Under page setting).

<!-- Sticky.js asset -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-js/1.2.2/sticky.min.js" integrity="sha256-xVuYoh/ruuLsbMBrs2Z+PgemhhoeWgJEoQFfpTUAh4Y=" crossorigin="anonymous"></script>

<!-- initialize sticky.js -->
<script>
  var sticky = new Sticky('[data-sticky="sticky"]', 
    {
      /* options */
      stickyClass: 'is-sticky',
    }
  );  
  console.log();
</script>

Extra options:

https://github.com/rgalus/sticky-js#available-options

Add top margin on scroll:

image
image850×459 24.9 KB

Disable sticky on mobile (For example on-screen less than 767px):
image

is-active “trick”

Change the color of the box when the div is sticky.

Add any is-sticky class you want (combo-class). Change color - background-color and so on.

image

Add transitions for the base class:
image

Publish and get this effect:
https://www.loom.com/share/3324aa90f6ae41f88ed20e2a90a50d50

Done :slight_smile:

Related:

2

Isn’t this something easily achievable with position: sticky which is native in WF?

3

You right. But i saw this Q 1000 times :slight_smile: and someone ask me to add solution by code.

1 Like
4

I see you modified the post - the mention of fixed position threw me off a bit.

I think it would be cool if you were to better explain what’s the difference of this method and using regular “sticky” of WF. With visual examples etc.

1 Like
5

I added video screenshot (By code VS by CSS only). Thanks for the input.

6

Maybe I am dumb but isn’t what happens now with green rectangle in your vid is exactly what would happen if you were to use regular wf sticky position with top:0 for that rectangle inside that section?

9

I edit my answer. You right (The container works the same by CSS if you set webflow wrapper position to relative). Anyway by this plugin you more options like:
adding active class when sticky is true add top-margin run function when sticky is true and so on… this could be one more option for sticky behavior.

1 Like
10

OK, I was just posting the requested recreation of the example in the vid :smiley:

And those are the ones that would be cool to see in action with examples so that people know what more they cold get from the library!

1 Like
11

I just noticed position: sticky does not works inside a tab element, this could be useful in such cases