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="//"></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 class="sticky">
  <h2 class="title">Header 2</h2>

<div class="sticky">
  <h2 class="title">Header 3</h2>


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.


This awesome jQuery plugin is developed by mugetsu. For more Advanced Usages, please check the demo page or visit the official website.