Need help with slinky?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

iclanzan
203 Stars 35 Forks MIT License 16 Commits 6 Opened issues

Description

Scrolling navigation component for web apps

Services available

!
?

Need anything else?

Contributors list

# 54,307
JavaScr...
Shell
React
inferno
14 commits
# 47,386
Haxe
skeleto...
SQLite
jvm-lan...
1 commit

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.