Makes headers for sections in lists sticky. Known from the iPhone OS tables views.
JavaScript
Latest commit ea89b14 Jun 13, 2013 @polarblau Updating license year.
Permalink
Failed to load latest commit information.
lib/jasmine-1.1.0 Added small test suite using Jasmine. Oct 9, 2011
spec Added small test suite using Jasmine. Oct 9, 2011
src
.gitignore Added small test suite using Jasmine. Oct 9, 2011
GPL-LICENSE.txt Updated demo link, added license files and removed jQuery and demo. Oct 8, 2011
MIT-LICENSE.txt
README.markdown Updated CSS section of the readme. Jul 11, 2012

README.markdown

Usage

Basic options

$('#sticky-list').stickySectionHeaders();

Check out the demo here.

Settings and defaults

$('#sticky-list').stickySectionHeaders({
  stickyClass      : 'sticky',
  headlineSelector : 'strong'
});

HTML

<div id="sticky-list">
  <ul>
    <li>
      <strong>Section Headline 1</strong>
      <ul>
        <li>Content line</li>
        <li>Content line</li>
        <li>Content line</li>
        <li>Content line</li>
      </ul>
    </li>
    <li>
      <strong>Section Headline 2</strong>
      <ul>
        <li>Content line</li>
        <li>Content line</li>
      </ul>
    </li>
    <li>
      <strong>Section Headline 4</strong>
      <ul>
        <li>Content line</li>
        <li>Content line</li>
        <li>Content line</li>
        <li>Content line</li>
      </ul>
    </li>
  </ul>
</div>

CSS

/* Reset some list defaults for all lists */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The main container */
#sticky-list  {
  height: 100px;
  overflow: hidden;
  position: relative;
}

/* The main list */
#sticky-list > ul {
  height: 100%;
  overflow: auto;
}

/* Section headers, defined through "headlineSelector" */
#sticky-list > ul > li strong {
  display: block;
}

/* Section headers when "sticky", defined through "stickyClass" */
#sticky-list > ul > li.sticky strong {
  position: absolute;
  top: 0;
}