StickySectionHeaders

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