Scrolling navigation component for web apps
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test
.gitignore
.jshintrc
CONTRIBUTING.md
LICENSE
README.md
bower.json
gulpfile.js
package.json
slinky.jquery.json

README.md

Slinky.js

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.

Getting Started

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.

Example

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.

Credits

Thanks to @callmevlad for the idea!

Release History

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