Headtacular

A nice minimalist sticky header. Project Site: http://s.codepen.io/mike-zarandona/debug/zvEwKO.

Let's Begin

Requirements

• jQuery

Getting Started

1. Include jQuery
2. Include jquery.headtacular.js
3. When the document is ready(), call .headtacular() on the element which you'd like to stick

Example

$('.header').headtactular({ scrollPoint: 100 });

How it Works

As the user scrolls, the script will check if they have scrolled past the scrollPoint. If so, it will add the CSS class .is-stuck to the targeted object.

This is a BYOS (Bring Your Own Style) plugin. That means it is up to you to style the targeted object as well as the .is-stuck class as this plugin doesn't come with any styling. That keeps things flexible and simple.

You could try something like this:

.header {
	transition: all 300ms;
	background-color: #fff;
	position: relative;
	z-index: 9999;
}

.header.is-stuck {
	position: fixed;
	left: 0;
	width: 100%;
	top: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

Options

scrollPoint (default: 0)
Sets the distance (in pixels) from the top of the browser window which the user must scroll to activate Headtacular.

showScrollPoint (default: false)
Sets the distance (in pixels) from the top of the browser window which the user must scroll to activate Headtacular.

parentOffset (default: true)
Activates the padding offset fix - the .parent() of the targeted object will have a padding-top applied equal to the height of the .is-stuck element.

Changelog

v1.0.4

• Documentation update.

v1.0.3

• Added bower.json for Bower support.

v1.0.2

• Bug fix: fixed typo inside document.ready() event

v1.0.1

• Added options.parentOffset to turn on / off padding fix
  

• Fired a check at document.ready() for pre-scrolled pages

v1.0.0

• Initial release.

Author

Mike Zarandona | @mikezarandona