jQuery.stickysectionheaders v1.0.0

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;
  top: 0;
}
        

Javascript

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

Demo