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
   
Minimal Instagram-style Sticky Header Plugin With jQuery - Stickish

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.