🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Given the appropriate mark-up structure this plugin keeps headers in place while scrolling, known from the iPhone table view.

CSS Menus

Documentation

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

You May Also Like