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