A Simple, Usable jQuery Plugin To Make A Div Sticky | stickySidebar

stickySidebar is a simple and usable jQuery plugin to make div sticky and useful for sticky sidebars that follow the user in scrolling and that can make the sidebar always visible when you scroll down the page.

sticky sidebar on scroll jquery, sticky sidebar on scroll javascript, sidebar fixed when scrolling down css, sidebar fixed when scrolling down jquery

How to make use of it:

1. Place the JavaScript stickySidebar.js after loading the most recent jQuery library.

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

2. Attach the function sticky sidebar to the sidebar component and the plugin will deal with the remainder.

<aside id="sidebar">
  <h3>Sidebar</h3>
</aside>
$(function(){
  $('#sidebar').stickySidebar();
});

3. Specify the distance between the sticky sidebar and the highest of the web page, often barely higher than the height of your sticky header.

$(function() {
  $( '#sidebar' ).stickySidebar({
    topPadding: 100
  });
});

Read More – In-Page JavaScript Sticky Navigation Plugin | Navigator.js

4. Specify the duration of the animation.

$(function() {
  $( '#sidebar' ).stickySidebar({
    animationDuration: 500
  });
});

5. Increase the footerThreshold worth to prevent the sticky component from pushing your footer aspect down.

$(function() {
  $( '#sidebar' ).stickySidebar({
    footerThreshold: 80
  });
});

Minimal Sticky Sidebar Using jQuery, stickySidebar Plugin/Github, sticky sidebar jquery, sticky sidebar on scroll, sticky sidebar example


See Demo And Download

Official Website(tony-rowan): Click Here

This superior jQuery/javascript plugin is developed by tony-rowan. For extra Advanced Usage, please go to the official website.

Share