Sticky widget
Overview
The sticky widget allows developers to fix a page element on the screen in a specific position while a user scrolls the page.
Widget source file is lib/web/mage/sticky.js.
Usages:
Initialize the sticky widget
The sticky widget can be initialized as described in JavaScript initialization.
Initialize with data-mage-init
attribute
1
2
3
4
<div class="block-bundle-summary"
data-mage-init='{"sticky":{"container": ".product-add-form"}}'>
[...]
</div>
Initialize in .js
file with options
1
2
3
$('.sticky-element').sticky({
container: '.sticky-parent'
});
Options
container
Element selector, who’s height will be used to restrict the maximum offsetTop
position of the sticky element. Default uses document body
.
Type: String
Default value: ''
spacingTop
Spacing in pixels above the sticky element.
Type:
- Number
- Function, that will return a Number
Default value: 0
stickAfter
Allows the postponing of sticking, until element goes off the screen for the number of pixels.
Type:
- Number
- Function, that will return a number
Default value: 0
stickyClass
CSS class for active sticky state.
Type: String
Default value: _sticky
Styles
The Sticky widget will not work without basic CSS Styles.
The sticky page element has to have a position relative to the beginning of the page.
.sticky-element {
position: relative;
}
Code Example
1
2
3
4
5
6
7
8
9
<script type="text/x-magento-init">
{
".sidebar.sidebar-additional": {
"sticky": {
"container": ".columns"
}
}
}
</script>