Jquery-stickyheaders

Jquery plugin to stick headers while scrolling similar to instagram.

Download this project as a .zip file Download this project as a tar.gz file

jquery-stickyheaders

Jquery plugin to stick headers while scrolling similar to instagram.

Demo

Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci neque, accumsan in dui in, gravida sodales diam. Quisque ligula dolor, ultrices ut tellus eu, imperdiet viverra metus. Quisque pulvinar mollis felis egestas molestie. Phasellus facilisis odio quis laoreet congue. Fusce in neque tincidunt, tincidunt turpis eu, sodales felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse iaculis massa eget aliquam posuere. Curabitur vel lobortis nunc. Suspendisse placerat felis at lorem tempor interdum.

Header 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci neque, accumsan in dui in, gravida sodales diam. Quisque ligula dolor, ultrices ut tellus eu, imperdiet viverra metus. Quisque pulvinar mollis felis egestas molestie. Phasellus facilisis odio quis laoreet congue. Fusce in neque tincidunt, tincidunt turpis eu, sodales felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse iaculis massa eget aliquam posuere. Curabitur vel lobortis nunc. Suspendisse placerat felis at lorem tempor interdum.

Header 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci neque, accumsan in dui in, gravida sodales diam. Quisque ligula dolor, ultrices ut tellus eu, imperdiet viverra metus. Quisque pulvinar mollis felis egestas molestie. Phasellus facilisis odio quis laoreet congue. Fusce in neque tincidunt, tincidunt turpis eu, sodales felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse iaculis massa eget aliquam posuere. Curabitur vel lobortis nunc. Suspendisse placerat felis at lorem tempor interdum.

Header 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci neque, accumsan in dui in, gravida sodales diam. Quisque ligula dolor, ultrices ut tellus eu, imperdiet viverra metus. Quisque pulvinar mollis felis egestas molestie. Phasellus facilisis odio quis laoreet congue. Fusce in neque tincidunt, tincidunt turpis eu, sodales felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse iaculis massa eget aliquam posuere. Curabitur vel lobortis nunc. Suspendisse placerat felis at lorem tempor interdum.

Header 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci neque, accumsan in dui in, gravida sodales diam. Quisque ligula dolor, ultrices ut tellus eu, imperdiet viverra metus. Quisque pulvinar mollis felis egestas molestie. Phasellus facilisis odio quis laoreet congue. Fusce in neque tincidunt, tincidunt turpis eu, sodales felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse iaculis massa eget aliquam posuere. Curabitur vel lobortis nunc. Suspendisse placerat felis at lorem tempor interdum.

Header 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque orci neque, accumsan in dui in, gravida sodales diam. Quisque ligula dolor, ultrices ut tellus eu, imperdiet viverra metus. Quisque pulvinar mollis felis egestas molestie. Phasellus facilisis odio quis laoreet congue. Fusce in neque tincidunt, tincidunt turpis eu, sodales felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse iaculis massa eget aliquam posuere. Curabitur vel lobortis nunc. Suspendisse placerat felis at lorem tempor interdum.

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