@codingheads/sticky-header

Sticky Header

This library allows you to create sticky headers. It uses position: sticky and IntersectionObserver.

The plugin doesn't require jQuery, but it adds itself to jQuery if jQuery exists on the page.

Installing

Use npm (or yarn) to install the package.

npm install --save @codingheads/sticky-header

Initializing in JavaScript

To initialize the library, you need to create a new instance of the StickyHeader class:

import StickyHeader from '@codingheads/sticky-header';

const header = document.querySelector('header.page-header');
new StickyHeader(header, options);

Or using jQuery:

import '@codingheads/sticky-header';

$('header.page-header).stickyHeader(options);

The options object can have the following properties:

• mainClass - the class added when the plugin is initialized (default: sticky)
• pinnedClass - the class added when the element becomes "stuck" (default: sticky-pinned)
• unpinnedClass - the class added when the element becomes "unstuck" (default: sticky-unpinned)
• offset - the offset (in pixels) where the element should become "stuck" (default: 0)
• addBodyClasses - add the pinnedClass and unpinnedClass classes to the body element as well (default: true)

Warnings

1. The plugin uses position: sticky. This is supported in all modern browsers. However, position: sticky has some requirements: you must not have parent elements with overflow: hidden, or otherwise it will not work (the position will be static). If you cannot get it to start, check that you don't have overflow: hidden on a parent element.

2. If you change the header size depending on the "stuck"/"unstuck" status, you will probably need to prevent the window from scrolling when this happens (the header will push the content).

If you have a #wrapper element around the content (including the header), you could do something like this:

header.sticky {
  top: 0;
  position: sticky;
}

/** fix for when the header grows in size when it becomes unpinned and the scroll position changes (we need to scroll more) **/
@supports (position: sticky) {
  body.sticky-unpinned #wrapper {
    overflow-anchor: none;
  }
}