Tweak the options below and see what effect they have. The example styles are using slightly modified effects from the fantastic animate.css

As you change the options they are automatically applied to the page's header. Example code is also generated below as you make changes.

Options

Offset

Tolerance

Styles

Slide

Swing

Flip

Bounce

Widget code

Using plain JS, pass the options as the second argument to the constructor. Be aware that when using headroom in this way, the options aren't automatically merged with the defaults (so you must define every property).

Plugin code

Using the plugin, options are automatically merged with the defaults (deep-merged using $.extend(true, {}, defaultOptions, yourOptions)).

Data API code

If you're using the data-* API, define any property as a data attribute. Options supplied via the data-* API are also deep-merged with defaults. Supply a JSON object to alter the classes used by headroom.js