@codingheads/sticky-header/README.md

A library that allows you to create sticky headers. It uses `position: sticky` and IntersectionObserver

# 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.

```npm2yarn
npm install --save @codingheads/sticky-header
```

## Initializing in JavaScript

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

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

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

Or using jQuery:

```javascript
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:

  ```css
  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;
    }
  }

  ```