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:
Select the green “ugly” div hh, and add sticky element by custom attribute
- Name: data-sticky
- Value: sticky
Why not class? I don’t want to add unwanted “extra” combo classes:
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
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:
Disable sticky on mobile (For example on-screen less than 767px):
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.
Add transitions for the base class:
Publish and get this effect:
https://www.loom.com/share/3324aa90f6ae41f88ed20e2a90a50d50
Done 
Related:
