active-header v0.1.0

DynamicHeader

Make the header of your web pages dynamic.

Node

Install in your Node project with

and use it inside your code via

or, alternatively

Plain old Web Page

In case you don´t have a Node project and simply want to use the dynamic header in your plain old web page, you have to import the javascript library dynamic-header.min.js into your html file. An example can be found in dynamic-header.html.

Usage

Once you made the module/library available to your code, you can use the dynamic header as follows:

Settings

The DynamicHeader can be configured by providing a settings object to the init routine.

• settings.headerId String ? The id of the header object. If omitted the html header tag (if existing) or any dom element with an id named 'header' will be selected to apply the DynamicHeader behavior.
• settings.delta Number ? A user has to scroll the given amount of pixels in order to activate the dynamic header behavior. Default is 5.
• settings.fixed Boolean ? If true, the header will be positioned fix and will not slide in and out. Default is false.
• settings.slideIn String ? Provide a CSS class name to be applied to the header whenever the header is sliding into the page (which is the case when the user is scrolling up). The class will only be applied as long as the user is able to scroll up. Once the top of the page is reached, the class will be removed from the header. Default class name is 'slide-in'.