You are reading the documentation for version 2.2. Magento 2.3 is the latest version available. Ensure you are reading the documentation for your version of Magento.

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:

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'
});

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

Sticky Widget in action