slinky

by iclanzan

iclanzan / slinky

Scrolling navigation component for web apps

206 Stars 35 Forks Last release: Not found MIT License 16 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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:


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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.