Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Makes headers for sections in lists sticky. Known from the iPhone OS tables views.
JavaScript
tree: 8c6a365792

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib/jasmine-1.1.0
spec
src
.gitignore
GPL-LICENSE.txt
MIT-LICENSE.txt
README.markdown

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;
  left: 0;
  right: 0;
  top: 0;
}
Something went wrong with that request. Please try again.