Sections

Introduction

Base styles

Plugins

Sticky

Makes elements stick to the top or bottom of the page and control their appearance when they do.

Usage

Via data attributes

Use data-element="sticky" on the element that you want to become sticky.

<ul class=list-unstyled" data-element="sticky">...</ul>

If data attributes are used, you will need to ensure that the allow unsage HTML setting is enabled within Guide.

Via JavaScript

The Sticky plugin can be initialized on a given element using JavaScript:

var nav = document.querySelector('.my-nav');
if (nav) {
  new Sticky(nav);
}

Example

Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data-.

Name Type Default Description
scrollElement string
DOM element		 window The scrolling container element that should be observed.
offset number 0 The offset amount (positive or negative) to apply before applying stuck and unstuck class names.
hide boolean false True if the element should be hidden when the page (or container) is scrolled up.
tolerance number 8 How many pixels of movement to allow before the sticky element is hidden.
classNames object
string		 See table below Class names to be applied under various conditions.

className can be provided as an object or JSON string. The following table provides an overview of the available properties and their default values.

Name Default Description
sticky sticky-top Applied when the plugin is initialized. The default .sticky-top sticks the element to the top of the page.
unstuck null Applied when the element is not stuck to the top or bottom of the scroll element.
stuck null Applied when the element is stuck to the top or bottom of the scroll element.
hidden is-hidden Applied when the element is hidden (see hide option above).

Events

Name Description
sticky.initialize Fires when the plugin is initialized.
sticky.stuck Fires when the element is stuck to the top or bottom of the scroll element.
sticky.unstuck Fires when the element is unstuck.
sticky.hidden Fires when the element is hidden.
sticky.shown Fires when the element is shown. 
document.addEventListener('sticky.stuck', function(e) {
  // Do something...
});