jQuery.stickysectionheaders v1.0.0

Markup

  

    

      Section Headline 1
      

        
Content line
        
Content line
        
Content line
        
Content line
      
    
    

      Section Headline 2
      

        
Content line
        
Content line
      
    
    

      Section Headline 4
      

        
Content line
        
Content line
        
Content line
        
Content line
      
    
  
          

        

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