Makes headers for sections in lists sticky. Known from the iPhone OS tables views.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib/jasmine-1.1.0 Added small test suite using Jasmine. Oct 9, 2011
spec
src Updating license year. Jun 14, 2013
.gitignore
GPL-LICENSE.txt Updated demo link, added license files and removed jQuery and demo. Oct 8, 2011
MIT-LICENSE.txt Updated demo link, added license files and removed jQuery and demo. Oct 8, 2011
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;
}