Sticky | Commerce Frontend Development

Edit in GitHub Log an issue

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 can be initialized as described in JavaScript initialization.

Initialize with `data-mage-init` attribute

<div class="block-bundle-summary"
     data-mage-init='{"sticky":{"container": ".product-add-form"}}'>
     [...]
 </div>
Copied to your clipboard
<div class="block-bundle-summary"
     data-mage-init='{"sticky":{"container": ".product-add-form"}}'>
     [...]
 </div>

Initialize in `.js` file with options

$('.sticky-element').sticky({
    container: '.sticky-parent'
});
Copied to your clipboard
$('.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;
}
Copied to your clipboard
.sticky-element {
    position: relative;
}

Code Example

<script type="text/x-magento-init">
 {
   ".sidebar.sidebar-additional": {
       "sticky": {
         "container": ".columns"
         }
    }
 }
</script>
Copied to your clipboard
<script type="text/x-magento-init">
 {
   ".sidebar.sidebar-additional": {
       "sticky": {
         "container": ".columns"
         }
    }
 }
</script>