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

An extremely simple jQuery plugin used to make the content headers sticky at the top of their parent container as you scroll down.

Sticky

Documentation

jquery-stickyheaders

Jquery plugin to stick headers while scrolling similar to instagram.

Demo

Please visit the demo page

Installation

Include script after the jQuery library (unless you are packaging scripts somehow else):

<script src="/path/to/jquery.stickyheaders.js"></script> <link rel="stylesheet" href="/path/to/stickyheaders.css">

Do not include the script directly from GitHub (http://raw.github.com/...). The file is being served as text/plain and as such being blocked in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.

Usage

Setup your content as such:

<div class="stickyContainer"> 	<div class="stickyHeader">Header 1</div> 	... content ... 	<div class="stickyHeader">Header 2</div> 	... content ... 	<div class="stickyHeader">Header 3</div> 	... content ... </div>
	$('.stickyContainer').stickyHeaders();

You can also register a callback to be fired during scrolling. $(this) will be the div element of the current header that is at the top of the scroll window. See the example for a use case.

	$('.stickyContainer').stickyHeaders({ 		onHeaderChange: function() { // When we scroll, trigger an event that tells us which header is currently at the top. We'll use this to update the select pulldown. 			var headerId = $(this).attr('data-header'); 			$('#headerJumpSelect').val(headerId); 		} 	});

Authors

TJ Hunter


You May Also Like