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:

• Magento Bundle
• Magento Blank theme

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
• spacingTop
• stickAfter
• stickyClass

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>

Result