jQuery Plugin For iOS List-Style Sticky Headers - Stacks

File Size: 5.57 KB
Views Total: 3235
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For iOS List-Style Sticky Headers - Stacks

Stacks is a jQuery plugin for creating Apple iOS List-Style Headers that allows the heading for the section to follow the user as the user scrolls down the page. The idea is to makes the navigation could follow the user, and remind the user where they were. When getting the user to the next section, the headers needed to change, and a new header follow the user. 

How to use it:

1. The html

<h1>Title 1</h1>
...
<h1>Title 2</h1>
...
<h1>Title 3</h1>
...

2. The CSS

.fixed {
position: fixed;
top: 20px;
z-index: 500;
}
.absolute {
position: absolute;
width: 100%;
margin-bottom: 0;
z-index: 501;
bottom: -16px;
box-sizing: border-box;
}
.contentbox {
position: relative;
}

3. Include jQuery library and jQuery Stacks on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="jquery.stacks.js"></script> 

4. Call the plugin

<script type="text/javascript">
$(function(){
$('body').stacks({
body: '.contentbox', // This is the container that will house your floating element. 
title: 'h1', // The identifier for the elements you want to be fixed, can be any type of jQuery selector
margin: 16,
offset: 20
})
})
</script>

This awesome jQuery plugin is developed by michaelsmedley. For more Advanced Usages, please check the demo page or visit the official website.