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.

$('.navbar').stickUp();

3. Configuration options.

$('.navbar').stickUp({

  // 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
  syncPosition:false,

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

  // Option to disable scrollUp if passed function returns false
  disableOn:function(){
    return true;
  }
  
});

4. Event handlers available.

$('.navbar').stickUp()
.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:

2018-03-23

• added resize event and topMargin recal after this event

2018-02-22

• Added events support.

2016-01-24

• Parent instead of offset parent

2015-07-01

• adds options to change classes

2015-06-25

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

2015-06-02

• added disableOn option

2015-05-25

• 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.