Tweak the options below and see what effect they have. The example styles used below are slightly modified effects from the fantastic animate.css. The source for the styles can be found on GitHub.

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

Styles

Plain JS

Using plain JS, pass the options as the second argument to the constructor. Options are automatically merged with the defaults.

jQuery/Zepto plugin

Using the plugin, pass the options object as the only parameter. Options are deep merged with the defaults.

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

AngularJS directive

Headroom can be used as an element or an attribute directive. When using an element directive, pass options to headroom via attributes.

Share this on: