Minimal Instagram-style Sticky Header Plugin With jQuery - Stickish
File Size: | 7.19 KB |
---|---|
Views Total: | 915 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Stickish is a very small jQuery plugin used to create cross-browser, Instagram-style sticky headers using CSS position:fixed
property. When you scroll down the webpage, the section header remains stuck to the top, then is pushed away by the new item.
See also:
Basic usage:
1. Load the jQuery Stickish plugin's script after you've loaded the latest jQuery library.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="stickish.min.js"></script>
2. Add the CSS class 'sticky' to your headers:
<div class="sticky"> <h2 class="title">Header 1</h2> </div> <div class="sticky"> <h2 class="title">Header 2</h2> </div> <div class="sticky"> <h2 class="title">Header 3</h2> </div> ...
3. Fix the headers to the top of the webpage while scrolling:
.stickish-item { position: relative; z-index: 1; border-bottom: solid 1px #111; border-top: solid 1px #444; padding: 1%; background: #333; } .stickish-item.fixed { position: fixed; z-index: 0; top: 0; width: 98%; } .stickish-item.fixed.absolute { position: absolute; }
4. Call the plugin on the matched headers and done.
$('.sticky').stickish();
This awesome jQuery plugin is developed by mugetsu. For more Advanced Usages, please check the demo page or visit the official website.