dheader
v0.5.30
Published
A dynamic header for web pages
Downloads
3
Readme
Table of Contents
DynamicHeader
DynamicHeader
A dynamic header for web pages.
Please download the repo and open the file index.html to see the usage.
Install DynamicHeader in your Node project with
and use it inside your code via
or, alternatively
You can also use it without node, by embedding the script dynamic-header.min.js in your web page.
Without any arguments, DynamicHeader.init() will search for a container with id="header" or a tag header and will make that container the dynamic header.
init
Parameters
settings
any?settings.headerId
String? Specify the id of the container you want to make the dynamic header. Default is 'header'. If not specified will search for the html header tag.settings.delta
Number? The number of pixels a user need to scroll at least in order to make DynamicHeader react on scrolling. Default is 25.settings.fixed
Boolean? If set to true, the header will never slide out of the way. Default is false.settings.hideOnClick
Boolean? If set to true, the header will slide out of the way when a click occurred inside the header. Default is true. Will be ignored when config.fixed is true.settings.pauseDuration
Number? When the header is hidden away after a click, the sliding mechanism is paused for a duration of 250 milliseconds to avoid interference with scrolling. Change the default here in terms of milliseconds.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. The header will have the CSS class is-dynamic when activated.settings.callback
Object? A callback function to be called whenever the header changes. The header is given as an argument into the callback.
destroy
Revert all changes that have been made by DynamicHeader;