Responsive Sticky Element Plugin For jQuery - Stickybox
| File Size: | 10.2 KB |
|---|---|
| Views Total: | 1999 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











