https://github.com/iclanzan/slinky
Scrolling navigation component for web apps
https://github.com/iclanzan/slinky
Last synced: 4 months ago
JSON representation
Scrolling navigation component for web apps
- Host: GitHub
- URL: https://github.com/iclanzan/slinky
- Owner: iclanzan
- License: mit
- Created: 2014-01-29T08:06:41.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2024-06-21T21:28:50.000Z (over 1 year ago)
- Last Synced: 2024-12-06T17:16:26.605Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://slinky.iclanzan.com
- Size: 25.4 KB
- Stars: 199
- Watchers: 15
- Forks: 34
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-frontend - Slinky.js - 堆叠头部创建滑动导航列表
- awesome-frontend - Slinky.js - 堆叠头部创建滑动导航列表
- awesome-front-end - Slinky.js - 堆叠头部创建滑动导航列表
README
# Slinky.js #
Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times. Scroll around on the [plugin homepage](https://iclanzan.github.io/slinky/) 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][min] or the [development version][max] and include it after jQuery. Then just call `$('.nav').slinky()` for example to enable Slinky on all elements with a `nav` class.
[min]: https://raw.github.com/iclanzan/slinky/master/dist/jquery.slinky.min.js
[max]: https://raw.github.com/iclanzan/slinky/master/dist/jquery.slinky.js
### Example ###
A minimal HTML structure for Slinky to work with can look something like this:
```html
```
And the accompanying CSS:
```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](https://twitter.com/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