jQuery Plugin For Creating Sticky Elements While Scrolling - stickUp2

File Size: 16.4 KB
Views Total: 1478
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Creating Sticky Elements While Scrolling - stickUp2

stickUp2 is a dead simple jQuery plugin helps you set multiple element (header, navigation, sidebar) sticky at the top of the web page while scrolling. Comes with several useful options including top margin setting, auto show / hide on scroll and more.

How to use it:

1. Include jQuery library and the jQuery stickUp2 plugin in the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/stickUp.js"></script>

2. Call the function on any html element to make it sticky when you scroll down the page.


3. Configuration options.


  // auto hide when you scroll down
  // reveal again when you scroll up
  scrollHide: false,

  // Similar to scrollHide but not hiding element. 
  // It rather adds the set value while scrolling up. 
  // Good for streamlining appearance and avoid overlapping when 
  // introducing multiple sticky elements with one autoHiding at top.
  lazyHeight: 0,

  // distance from the top of the webpage
  topMargin: "auto",

  // wether the sticked element is caught in a wrapping container
  keepInWrapper: false,

  // selector of container to hold the sticky element
  wrapperSelector: '',

  // Z-index property
  zIndex: 99,

  // forces stickUp to synchronize left position

  // change CSS classes here
  namespaceClass: "stuckElement",
  fixedClass: "isStuck",

  // Option to disable scrollUp if passed function returns false
    return true;

4. Event handlers available.

.on( "stickUp:beforeStick", function() {
  // before stick

.on( "stickUp:stick", function() {
  // is stuck

.on( "stickUp:beforeUnstick", function() {
  // before unstick

.on( "stickUp:unstick", function() {
  // is unstuck

.on( "stickUp:scroll", function() {
  // is scrolling

.on( "stickUp:resize", function() {
  // when the viewport is resized

Change logs:


  • added resize event and topMargin recal after this event


  • Added events support.


  • Parent instead of offset parent


  • adds options to change classes


  • fixing lazyheight issue when resizing content
  • fixing resize issues when hold


  • added disableOn option


  • adding lazyHeight option

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