jquery.fixed-header

jquery.fixed-header.js

jQuery script to add fixed header functionality

*Requires Node.js 4+

Usage

Include the script in your page.

<script src="node_modules/jquery.fixed-header/jquery.fixed-header.js"></script>

Now you can activate the script by simply add the call to your header.

$('.header').fixed();

Options

There are also some options that can be set. Simply add an object to the function call.

$('.header').fixed({
  toAnchor: 'scroll',
  onLoadAnchor: 'jump',
  onChangeAnchor: 'jump',
  offset: 50,
  class: 'header--fixed',
  objects: {}
});

	type	default	possible	description
toAnchor	string	scroll	scroll, jump, ''	Define action on anchor click. For example `scroll` scrolls to the new anchor position with the fixed header.
onLoadAnchor	string	jump	scroll, jump, ''	Define action on page load with anchor in url. For example `jump` jumps immediately to the anchor.
onChangeAnchor	string	jump	scroll, jump, ''	Define action url change with anchor. For example `jump` jumps immediately to the anchor.
offset	number	50	Any number from zero	Set the offset from when the fixed header should be triggert.
class	string	header--fixed	All strings with css convention	Set the offset from when the fixed header should be triggert.
objects	objects	{}		Add additional elements to set classes if header is fixed Example: ```javascript objects: [ { object: $('.logo'), class: 'logo--fixed' } ] ```