Stickyflow is a plugin that enhance css sticky position by making it scroll the content also if overflowing the window.


Import the javascript file with import 'xtendui/src/stickyflow'.

Initialize manually within javascript with new Xt.Stickyflow(document.querySelector('.my-container'), {/* options */}).


Be sure that sticky parent has not overflow-hidden or position: sticky; doesn't work.

Remember to use .items-stretch on on the container or .sticky doesn't work.

This addon is for css position: sticky; and doesn't need Gsap ScrollTrigger.


Here are the main javascript options.

SyntaxDefault / ArgumentsDescription
Optiondebug:BooleanfalseDebug on console
Optionelement:QueryfalseSticky element query
Optionfiller:QueryfalseFiller element query

Match Media

You can add additional options that gets added on match media query. You can use different queries with different and nested options.

SyntaxDefault / ArgumentsDescription
Optionmatches:ObjectfalseAdd additional options on match media query


You can get self object from DOM node on Xtend UI components with Xt.get.

let self = Xt.get({ name: 'xt-stickyflow', el: document.querySelector('.my-container') })

You can set default options for all components of the same type, with Xt.options.

Xt.options['xt-stickyflow'] = {
  debug: true,


Listen to events, for listeners use this guideline.

SyntaxDOM ElementDescription
Eventchange.xt.stickyflowinputPosition change event
Eventinit.xt.stickyflowcontainerInit or reinit event
Eventstatus.xt.stickyflowcontainerStatus event (enabled or disabled)
Eventdestroy.xt.stickyflowcontainerDestroy event


Access properties by getting self object.

let self = Xt.get({ name: 'xt-stickyflow', el: document.querySelector('.my-container') })
const container = self.container
PropertycomponentName:StringComponent name (used in Xt.get)
Propertyoptions:ObjectFinal options
Propertyinitial:BooleanIf initial or reset activation
Propertydisabled:BooleanIf component disabled
Propertycontainer:NodeContainer node
Propertyelement:NodeSticky element
Propertyfiller:NodesFiller element


Call methods by getting self object.

let self = Xt.get({ name: 'xt-stickyflow', el: document.querySelector('.my-container') })
self = null
Methodself.reinit()Reinit component
Methodself.disable()Disable component
Methodself.enable()Enable component
Methodself.destroy()Destroy component