Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Makes headers for sections in lists sticky. Known from the iPhone OS tables views.
JavaScript
tree: bf5d306df3

Fetching latest commit…

Cannot retrieve the latest commit at this time

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

README.markdown

Usage

Basic options

$('#container').stickySectionHeaders();

Check out the demo here.

Settings and defaults

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

Requires basic HTML structure

<div id="container">
  <ul class="sections">
    <li>
      <strong>Section Headline 1</strong>
      <ul>
        <li id="id-1">Content line</li>
        <li id="id-2">Content line</li>
        <li id="id-3">Content line</li>
        <li id="id-4">Content line</li>
      </ul>
    </li>
    <li>
      <strong>Section Headline 2</strong>
      <ul>
        <li id="id-5">Content line</li>
        <li id="id-6">Content line</li>
      </ul>
    </li>
    <li>
      <strong>Section Headline 4</strong>
      <ul>
        <li id="id-14">Content line</li>
        <li id="id-15">Content line</li>
        <li id="id-16">Content line</li>
        <li id="id-17">Content line</li>
      </ul>
    </li>
  </ul>          
</div>

And some simple CSS to

/* 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.