jQuery.stickysectionheaders v1.0.0

jQuery.stickysectionheaders takes a nested list and enables section headings as known from iOS table views. When scrolling down, always the current section heading "sticks" to the top of the list until the next heading "pushes" it out of the viewport.

Usage

Markup


<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

A minimal set of CSS rules is required:


/* 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;
}
        

Javascript


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

Demo

  • Section Headline 1
    • Content line
    • Content line
    • Content line
    • Content line
  • Section Headline 2
    • Content line
    • Content line
  • Section Headline 3
    • Content line
    • Content line
    • Content line
    • Content line
    • Content line
    • Content line
    • Content line
  • Section Headline 4
    • Content line
    • Content line
    • Content line
    • Content line

License

Copyright (c) 2011 Florian Plank (http://www.polarblau.com/).
Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.


Download the source

ZIP icon ZIP icon