Skip to content
This repository

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.

branch: master
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;
}
Something went wrong with that request. Please try again.