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 unsafe 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

Sticky navbar with shadow

<header class="header bg-white border-bottom transition-fast" id="header" data-element="sticky" data-offset="20" data-class-names='{ "sticky": "sticky-top", "stuck": "shadow-sm" }'>
  <nav class="navbar navbar-light container font-size-md" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement" aria-label="Primary navigation">
    {{#link 'help_center' class='navbar-brand mr-auto'}}
      <img class="block img-fluid h-6" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
    {{/link}}
    <button class="navbar-toggle ml-2" data-toggle="collapse" data-target="#primary-nav" aria-controls="primary-nav" aria-expanded="false" aria-label="Toggle navigation">
      <span></span>
    </button>
    <ul class="nav nav-menu text-center collapse md:flex" role="menu" id="primary-nav">
      <li class="nav-item">
        <a class="nav-link" href="#" role="menuitem">
          Back to website
        </a>
      </li>
      <li class="nav-item">
        {{link 'new_request' class='button button-outline-primary my-4 md:my-0' role='menuitem'}}
      </li>
      {{#unless signed_in}}
        <li class="nav-item">
          {{#link "sign_in"}}
            {{t 'sign_in' role='menuitem'}}
          {{/link}}
        </li>
      {{/unless}}
    </ul>
    {{#if signed_in}}
      <div class="user-info dropdown">
        <button class="not-a-button dropdown-toggle inline-flex align-items-center" aria-haspopup="true">
          {{user_avatar class="user-avatar ml-2 h-6 w-6 circle"}}
          <span class="nav-link pl-2 pr-0 hidden md:inline-block">
            {{user_name}}
            <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
          </span>
        </button>
        <div class="dropdown-menu" role="menu">
          {{link "my_activities" class='dropdown-item' role="menuitem"}}
          {{my_profile class='dropdown-item' role="menuitem"}}
          {{change_password class='dropdown-item' role="menuitem"}}
          {{link "sign_out" class='dropdown-item'  role="menuitem"}}
        </div>
      </div>
    {{/if}}
  </nav>
</header>

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

Core concepts

Setup

Base styles