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">
$(function(){
$('body').stacks({
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
})
})
</script>
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;}