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
4 May 17, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
11 Nov 29, 2022
7 Jun 27, 2022
3 Mar 13, 2022
44 Dec 30, 2022
4 Jun 16, 2022
4.1k Dec 29, 2022