jquery.SmartHeader.js

Make fixed headers smarter on scroll — disappearing on downwards scroll and reappearing on upwards scroll. Inspired by Teehan+Lax, Readability, and MailChimp. See an example here for a better idea.

Basic Usage

Download the production version or the development version.

Or install using a package manager:

// npm
npm install --save jQuery.SmartHeader.js

// bower
bower install --save jQuery.SmartHeader.js

// component
component install lukechesser/jQuery.SmartHeader.js

In your web page:

<script src="jquery.js"></script>
<script src="dist/jQuery.SmartHeader.min.js"></script>
<script>
jQuery(function($) {
  $('.header').smartHeader();
});
</script>

Documentation

Make sure to include jQuery in your page before including SmartHeader.min.js. Calling SmartHeader is easy:

// basic
$('.header').smartHeader();

// custom options
$('.header').smartHeader({
	scrollDownThreshold: 50,
	scrollUpThreshold: 20,
});

// custom options & animations
$('.header').smartHeader({
	scrollDownThreshold: 60,
	scrollUpThreshold: 30,
	animation: {
		onShow: 'bounceInDown',
    	onHide: 'bounceOutUp','
	}
});

Options

• scrollDownThreshold (pixels): How far the user has to scroll down before the header disappears (in pixels). After the header is hidden, the scrollDownThreshold is reset. Defaults to 30 pixels.

• scrollUpThreshold (pixels): How far the user has to scroll up before the header reappears (in pixels). After the header is shown, the scrollUpThreshold is reset. Defaults to 5 pixels.

• headerHeight (pixels): smartHeader automatically detects the height of the header, but if you have a header with a large drop shadow or border, override the height here to make the header (and shadow/border) disappear completely. Defaults to $('.header').height().

• animation (object/hash): if you want to add your own animations (instead of the default translateY animation), specifiy the onShow and onHide animations here. Defaults to null.

• animation.onShow (string/CSS class): an animation class to add to the header to reveal the header. Note: for animations to work, you must add an animation duration and animation-fill-mode class to the header directly in the HTML. See more below.

• animation.onHide (string/CSS class): an animation class to add to the header to hide the header. Note: for animations to work, you must add an animation duration and animation-fill-mode class to the header directly in the HTML. See more below.

Animate

If you want to use a custom animation function, you must specify a general animation class, ex. .animate, in your CSS like this:

.animate {
	animation-duration          : .9s;
	animation-fill-mode         : both;
}

And attach it to your header in your HTML, like this:

...
<div class="header animate">
	...
</div>
...

Look at the custom animation example's raw CSS file and HTML file for more info.

Examples

See a basic example here using the default animation (translateY).

// custom options
$('.header').smartHeader({
	scrollDownThreshold: 40,
	scrollUpThreshold: 10,
});

See a more advanced example here using a custom animation.

// custom animations
$('.header').smartHeader({
	scrollDownThreshold: 60,
	scrollUpThreshold: 20,
	animation: {
		onShow: 'bounceInDown',
    	onHide: 'bounceOutUp','
	}
});

Contributing

I'd love your help, so any contributions are welcome. Feel free to leave a feature request in the issues. If you do submit a pull-request, please follow the etiquette listed below:

• Please check to make sure that there aren't existing pull requests attempting to address the issue mentioned. We also recommend checking for issues related to the issue on the tracker, as another contributer may be working on the issue in a branch or fork.
• Non-trivial changes should be discussed in an issue first
• Develop in a topic branch, not master
• Squash your commits
• Write a convincing description of your changes to increase your chances of acceptance

To get your local environment up and running, run npm install and use grunt default to compile and minify assets.

Issues

Before submitting an issue:

• Make sure you're looking at the latest version
• Use the search feature to ensure that the issue hasn't been reported before

Please include as much information about the issue as possible.

Contributors

• Luke Chesser (Dribbble, Twitter, GitHub, Blog)