sticky-js

You can install sticky-js using npm or Bower.

npm install sticky-js
# or
bower install sticky.js

To use sticky-js, include the script in your HTML and initialize a new Sticky instance by passing a CSS selector for the element you want to make sticky. You can also pass a global options object.

<!-- 1. Include the script -->
<script src="sticky.min.js"></script>

<!-- 2. The element to make sticky -->
<div class="selector">Sticky element</div>

<script>
  // 3. Initialize
  var sticky = new Sticky('.selector');
</script>

When the wrap option is set to true (or the data-sticky-wrap attribute is present), sticky-js wraps the target element in a placeholder element. This is used to maintain the layout and prevent the page from jumping when the element switches to position: fixed.

If wrapping is enabled, the library applies display: block and sets the width and height of the parent (the wrapper) to match the original dimensions of the sticky element.

You can configure sticky behavior using either a global options object in the constructor or via data-* attributes on the HTML elements.

You can manage multiple sticky elements by using the data-sticky-container attribute on a parent element. This allows elements to be sticky relative to that specific container rather than the entire page. You can also configure individual element behavior using data-* attributes.

<div class="row" data-sticky-container>
  <div class="medium-2 columns">
    <img src="http://placehold.it/250x250" class="sticky" data-margin-top="20" data-sticky-for="1023" data-sticky-class="is-sticky">
  </div>
  <div class="medium-8 columns">
    <h1>Sticky-js</h1>
    <p>Lorem ipsum.....</p>
  </div>
  <div class="medium-2 columns">
    <img src="http://placehold.it/250x250" class="sticky" data-margin-top="20" data-sticky-for="1023" data-sticky-class="is-sticky">
  </div>
</div>

<script src="sticky.min.js"></script>
<script>
  var sticky = new Sticky('.sticky');
</script>

The Sticky instance provides methods to manage the lifecycle and state of the sticky element:

• update(): Recalculates the sticky position. Call this if the parent container (marked with data-sticky-container) changes its height.
• destroy(): Removes the sticky behavior from the element.

var sticky = new Sticky('.sticky');

// Call update when parent container height changes
sticky.update();

// Remove sticky behavior
sticky.destroy();

When instantiating the Sticky class, you can pass an options object to define global behavior. These options can be overridden on a per-element basis using data-* attributes.

const options = {
  wrap: false,             // Whether to wrap the element in a placeholder
  wrapWith: '<span class="wrapper"></span>', // The HTML to use for wrapping
  marginTop: 0,            // Default top margin when sticky
  marginBottom: 0,         // Default bottom margin for boundary detection
  stickyFor: 0,            // Minimum viewport width required for stickiness
  stickyClass: null,       // CSS class added to the element when active
  stickyContainer: 'body'  // Selector for the container the element is stuck within
};

new Sticky('.selector', options);

The library uses ECMAScript 5 features. Supported browsers include:

• IE 9+
• Chrome 23+
• Firefox 21+
• Safari 6+
• Opera 15+

If you need to support older browsers, you must provide an ECMAScript 5 polyfill.

To use sticky-js, instantiate the Sticky class by providing a CSS selector for the elements you want to make sticky and an optional configuration object. The library will automatically find these elements once the page is fully loaded and manage their sticky behavior based on scroll and resize events.

// Basic usage
const sticky = new Sticky('.my-sticky-element');

// Usage with configuration
const sticky = new Sticky('.my-sticky-element', {
  wrap: true,
  marginTop: 20,
  stickyClass: 'is-sticky'
});

To prevent memory leaks and remove all event listeners (scroll, resize, and load) associated with the sticky elements, call the .destroy() method on your Sticky instance.

const sticky = new Sticky('.my-element');

// Later, when the elements are no longer needed or the component unmounts
sticky.destroy();

You can customize the behavior of individual elements directly in your HTML using data-* attributes. These values take precedence over the global options passed to the Sticky constructor.

<!-- Individual element configuration -->
<div 
  class="my-element" 
  data-margin-top="10" 
  data-margin-bottom="20" 
  data-sticky-for="768" 
  data-sticky-class="active-sticky" 
  data-sticky-wrap
  data-sticky-wrap-with="<div class="wrapper"></div>"
>
  Sticky Content
</div>