Изменяйте параметры ниже и посмотрите какой эффект они вызывают. Примеры стилей используемых ниже являются слегка измененные эффекты библиотеки animate.css. Исходники стилей можно найти на ГитХабе.

При изменении параметров они автоматически применяются к шапке этой страницы. Пример кода, также сразу генерируется ниже.

Опции

Offset

Tolerance

Стили

Slide

Swing

Flip

Bounce

Просто JS

Используя ванильный JS передайте параметры в качестве второго аргумента конструктору Опции автоматически с мерживаются (merged) с дефолтными.

var headroom = new Headroom(elem, {
  "offset": 205,
  "tolerance": 5,
  "classes": {
    "initial": "animated",
    "pinned": "slideDown",
    "unpinned": "slideUp"
  }
});
headroom.init();

// to destroy
headroom.destroy();

jQuery/Zepto

Используя плагин, передайте объект опций в качестве единственного параметра.

$("header").headroom({
  "offset": 205,
  "tolerance": 5,
  "classes": {
    "initial": "animated",
    "pinned": "slideDown",
    "unpinned": "slideUp"
  }
});

// to destroy
$("#header").headroom("destroy");

Data API

Если вы используете data-* API, указывая опции плагина как data атрибуты. Для опции изменения classes (стилей) указывается JSON объект в атрибуте.

<header data-headroom data-tolerance="5" data-offset="205" data-classes='{"initial":"animated","pinned":"slideDown","unpinned":"slideUp","top":"headroom--top","notTop":"headroom--not-top","bottom":"headroom--bottom","notBottom":"headroom--not-bottom"}'></header>

// to destroy, in your JS:
$("header").data("headroom").destroy();

AngularJS directive

Headroom может использоваться как элемент или директива атрибута. Когда используется директива элемента, передайте опции в headroom через атрибуты.

<headroom tolerance="5" offset="205" classes='{"initial":"animated","pinned":"slideDown","unpinned":"slideUp","top":"headroom--top","notTop":"headroom--not-top","bottom":"headroom--bottom","notBottom":"headroom--not-bottom"}'></headroom>