dheader

Table of Contents

• DynamicHeader
• init
  • Parameters
• destroy

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

npm i dheader

and use it inside your code via

const DynamicHeader = require('dheader');

or, alternatively

import DynamicHeader from 'dheader';

You can also use it without node, by embedding the script dynamic-header.min.js in your web page.

<script src="dynamic-header.min.js"></script>

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;