Easy Floating/Sticky Sidebar Plugin With jQuery - floatit

floatit is a responsive sticky sidebar plugin for jQuery that fixes the sidebar widget to the top of the window when you scroll past it, until the widget reaches a specified element (for example the bottom of the webpage).

How to use it:

1. To use this plugin, first you need to load the floatit plugin's script jquery.floatit.js after loading jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.floatit.js"></script>

2. Then call the main function floatit on the target sidebar widget and done.

<aside>
  <div id="box">
    sticky box here
  </div>
</aside>

$('#box').floatit();

3. Set the 'limiter' element that stops sidebar scrolling at a certain position.

<aside>
  <div id="box">
    sticky box here
  </div>
</aside>
<footer>footer</footer>

$('#box').floatit({
  limiter: 'footer'
});

4. Set the top and bottom spacing while scrolling.

$('#box').floatit({
  top_spacing: 40,
  bottom_spacing: 10
});

5. Decide whether to preserve the width when the sidebar widget is sticky.

$('#box').floatit({
  preserve_width: true
});

6. Decide whether to recalculate the top & bottom position on window resize.

$('#box').floatit({
  recalculate: true
});

---

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