https://github.com/mike-zarandona/headtacular

A nice minimalist sticky header.
https://github.com/mike-zarandona/headtacular

Last synced: about 1 month ago
JSON representation

A nice minimalist sticky header.

• Host: GitHub
• URL: https://github.com/mike-zarandona/headtacular
• Owner: mike-zarandona
• Created: 2014-07-17T02:25:21.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-07-12T14:54:26.000Z (over 8 years ago)
• Last Synced: 2024-11-10T01:36:03.524Z (about 1 month ago)
• Language: JavaScript
• Homepage: http://codepen.io/mike-zarandona/full/zvEwKO
• Size: 5.86 KB
• Stars: 21
• Watchers: 5
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Headtacular

[![Bower version](https://badge.fury.io/bo/headtacular.svg)](http://badge.fury.io/bo/headtacular)

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




## Let's Begin

### Requirements

* jQuery

### Getting Started

1. Include jQuery

1. Include `jquery.headtacular.js`

1. 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** (**B**_ring_ **Y**_our_ **O**_wn_ **S**_tyle_) **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](http://mikezarandona.com) | [@mikezarandona](http://twitter.com/mikezarandona)