Fix Element Within Parent Container On Scroll - sticky.jquery.js

sticky.jquery.js is a small jQuery plugin for making an element always be fixed within its parent container when scrolling down.

The plugin sticks the element to the top of the webpage until it reaches a 'Stop' element.

A typical use of this plugin is to make a widget always stay visible within the sidebar.

It also has the ability to stop the 'Sticky' behavior on mobile devices to prevent breaking the page layout.

How to use it:

1. Insert the sticky.jquery.js script after the latest version of jQuery JavaScript library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="sticky.jquery.js"></script>

2. Create a 'Stop' element at which point the sticky element stops the 'Sticky' behavior.

<div class="main-content-end-padding">
  <!-- This content will mark the stop of sticky content -->
</div>

3. Call the function on your element which should be sticky as you scroll past it.

<div class="sticky-content">
  <p>Sticky content</p>
</div>

(function(){
  $('.sticky-content').StickyDL();
})()

4. Available options to customize the plugin.

$('.sticky-content').StickyDL({

  // start position
  paddingTop: 100,

  // selector of Stop element
  heightRefElement: '.main-content-end-padding',

  // optional Top/Bottom distances
  optionalBottomFix: 0,
  optionalTopFix: 0
  
});

---

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