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.
Syntax | Default / Arguments | Description | |
---|---|---|---|
Option | debug:Boolean | false | Debug on console |
Option | element:Query | false | Sticky element query |
Option | filler:Query | false | Filler 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.
Syntax | Default / Arguments | Description | |
---|---|---|---|
Option | matches:Object | false | Add 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.
Syntax | DOM Element | Description | |
---|---|---|---|
Event | change.xt.stickyflow | input | Position change event |
Event | init.xt.stickyflow | container | Init or reinit event |
Event | status.xt.stickyflow | container | Status event (enabled or disabled) |
Event | destroy.xt.stickyflow | container | Destroy event |
Properties
Access properties by getting self object.
let self = Xt.get({ name: 'xt-stickyflow', el: document.querySelector('.my-container') })
const container = self.container
Syntax | Description | |
---|---|---|
Property | componentName:String | Component name (used in Xt.get ) |
Property | options:Object | Final options |
Property | initial:Boolean | If initial or reset activation |
Property | disabled:Boolean | If component disabled |
Property | container:Node | Container node |
Property | element:Node | Sticky element |
Property | filler:Nodes | Filler element |
Methods
Call methods by getting self object.
let self = Xt.get({ name: 'xt-stickyflow', el: document.querySelector('.my-container') })
self.destroy()
self = null
Syntax | Description | |
---|---|---|
Method | self.reinit() | Reinit component |
Method | self.disable() | Disable component |
Method | self.enable() | Enable component |
Method | self.destroy() | Destroy component |