A really simple jQuery script for adding a sticky class to the header on scroll.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_layouts
.gitignore
LICENSE
README.md
_config.yml
simple-sticky-header.js
simple-sticky-header.min.js

README.md

Simple Sticky Header

A really simple jQuery script for adding a sticky class to the header on scroll.

simple-sticky-header.js works by adding a CSS class to the target once the window has been scrolled past it.
It also removes the class if you scroll back up.

Live demo

Installation

Download and include simple-sticky-header.min.js in your document after including jQuery.

<script src="path/to/jquery.min.js></script>
<script src="path/to/simple-sticky-header.js"></script>

Usage

Simply call the plugin on the header.

$("#sticky-header").simpleStickyHeader();

The default class that gets added to the target is sticky-header.
This can be changed by passing an option to the plugin.

$("#sticky-header").simpleStickyHeader({
    class: "your-class"
});

Make sure you have a CSS class for the sticky header.
Here's basic CSS for making it sticky:

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
}

by Olof Enström