https://github.com/emn178/jquery-stickit

jQuery-stickit

A jQuery plugin provides a sticky header, sidebar or else when scrolling.

If you want it works in mobile device when scrolling, you could try jQuery-mscroll.

Download

Compress
Uncompress

Installation

You can also install jquery-stickit by using Bower.

bower install jquery-stickit

Demo

Sidebar
Header
Navbar

Browser Support

jQuery-stickit currently supports IE, Chrome, Firefox, Safari and Opera.

Usage

$('#you-want-stick').stickit(options);

Options

scope: StickScope (default: StickScope.Parent)

Sets the element stick in the parent element or entire document.

StickScope.Parent: Sets the element stick in the parent element.

StickScope.Document: Sets the element stick in the entire document.

className: string (default: 'stick')

Sets the class name to the element when it’s stick.

top: number (default: 0)

Sets sticky top, eg. it will be stuck at position top 50 if you set 50.

zIndex: number (default: 100 or z-index of element css)

Sets z-index. Default is try to get element z-index property from css style. If undefined, default is 100.

extraHeight: number (default: 0)

Sets extra height for parent element, it could be used only StickScope.Parent. When the contents of parent has margin or something let the actual height out of container, you could use this options to fix.

Methods

destroy()

Removes the stickit functionality completely.

Example

Code

$('.stickit').stickit({
  // Sets the element stick in the parent element or entire document.
  scope: StickScope.Parent,

  // Sets the class name to the element when it's stick.
  className: 'stick',

  // Sets sticky top, eg. it will be stuck at position top 50 if you set 50.
  top: 0,

  // Sets extra height for parent element, it could be used only StickScope.Parent. When the contents of parent has margin or something let the actual height out of container, you could use this options to fix.
  extraHeight: 0
});

$('.stickit').stickit('destroy');

License

The project is released under the MIT license.

Contact

The project’s website is located at https://github.com/emn178/jquery-stickit
Author: emn178@gmail.com