Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times. Scroll around on the plugin homepage to see it in action.

Slinky is currently implemented as a jQuery plugin but if there is enough demand I might write a standalone version too.

Download the production version or the development version and include it after jQuery. Then just call $('.nav').slinky() for example to enable Slinky on all elements with a nav class.

A minimal HTML structure for Slinky to work with can look something like this:

<div class="nav">
  <div class="scroller">
    <section>
      <header>First Header</header>
      <ul>
        <li>item</li>
        <li>item</li>
      </ul>
    </section>
    <section>
      <header>Second Header</header>
      <p>Some content</p>
    </section>
    <!-- more sections here -->
  </div>
</div>

And the accompanying CSS:

.nav {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.scroller {
  height: 100%;
  overflow: auto;
}

Slinky doesn’t make any assumptions about the tags and classes you are using but it does expect to find an element with hidden overflow wrapped around a scrollable element. Inside of it content should be split into sections. The first child of each section is considered to be the header.

Thanks to @callmevlad for the idea!

• v0.1.1 (2014-02-06) Fixed rendering glitches on high density screens.
• v0.1.0 (2014-01-31) Initial version