🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Headtacular is a nice minimalist sticky header a jQuery plugin.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.

Plugins

Documentation

Headtacular

Bower version

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


You May Also Like