Responsive Sticky Element Plugin For jQuery - Stickybox

File Size: 10.2 KB
Views Total: 1945
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Sticky Element Plugin For jQuery - Stickybox

Stickybox is a barebone jQuery sticky element which makes any element stick to the screen on scroll, until reaching a specific element such as footer. The plugin also has the ability to disable the 'Sticky' behavior when the screen size is less than a breakpoint (default: 767px) specified in the JavaScript.

How to use it:

1. Place jQuery library and the jQuery Stickybox plugin's script at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.stickybox.js"></script>

2. Call the function on the target element to be stuck at the top of the webpage when scrolling down.

<div class="sidebar-box" id="sticky-box">
  Sticky Element
</div>
$('#sticky-box').stickyBox();

3. Plugin's default configuration options.

$('#sticky-box').stickyBox({

  // From this point on and below, boxes are not sticky
  notStickyBreakpoint: 767, 

  // Space between window top and boxes
  spaceTop: 20, 

  // False or elements which stop the boxes
  stoppper: false, 

  // Space between stopper elements and boxes
  stopperSpace: 20 
  
});

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