Stickyflow
Scroll

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

Javascript

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

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

Usage

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.

Options

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

Util

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

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

Properties

Access properties by getting self object.

let self = Xt.get({ name: 'xt-stickyflow', el: document.querySelector('.my-container') })
const container = self.container
SyntaxDescription
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

Methods

Call methods by getting self object.

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