Stick Elements At Their Starting Position As Scroll Down - jQuery Stalker

Stalker is a tiny and fast jQuery sticky plugin that makes elements stick to the top of the viewport as the user scrolls down. For example, navigation bars, videos, or images can be stuck at their starting position as the user scrolls a page.

How to use it:

1. Add references to jQuery library and the Stalker plugin.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.stalker.js"></script>

2. Call the function on the element which should be stuck on scroll. In this example, the navbar will follow you as you scroll down, and will return to its original position as you scroll up.

<div class="navbar">
  Navbar
</div>

$('.navbar').stalker({
  // options here
});

3. Sets the distance from the top of the page when the element is pinned. Default: 0.

$('.navbar').stalker({
  offset: 20 // 20px
});

4. Set the time to wait before sticking the element to the top while scrolling. Default: 0.

$('.navbar').stalker({
  delay: 1000 // 1s
});

5. Apply additional CSS styles to the element. Default: {}.

$('.navbar').stalker({
  stalkerStyle: {}, // CSS properties
});

6. Callback functions.

$('.navbar').stalker({

  // fired when the element begins following the user
  startCallback: null,

  // fired as soon as the element stops following the user
  // and returns to its original position
  stopCallback: null,
  
});

---

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