Skip to content
A jQuery plugin to create iOS list-style stacking headers
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A jQuery plugin to create iOS list-style headers

Recreates the effect from iOS contact lists etc. When you scroll down a page, the section header scrolls down with you, until you hit the next content header, which follows you from that point

Example use:

<script type="text/javascript">
    	body: '.contentbox', //the parent element which houses the scrolling header
    	title: 'h1', // the element you want to scroll
    	margin: 16, //as the header gets absolutely positioned when it hits the bottom, you might want to counter some margin or padding issues
        offset: 0 //if you have any other fixed elements, or need to include a margin from the top of the window, specify it here

You might also want to include some CSS to provide styling for fixed, absolute and parent containers, i.e.

.fixed{position: fixed;top:0;z-index:500;}
.absolute{position: absolute;width: 100%;margin-bottom:0;z-index:501;bottom: -16px;box-sizing:border-box;}
.contentbox{position: relative;}
You can’t perform that action at this time.