Pin Content For A Period Of Time While Scrolling - jQuery fixed-scroll.js

fixed-scroll.js is a tiny and easy-to-use jQuery plugin that keeps sections of your content sticky while the user scrolls.

The plugin ensures that specified content sections remain fixed on a page until a set scroll depth is reached. For instance, if you set the data-duration attribute to "2", it ensures that the sections stay fixed until the user has scrolled two window heights.

Perfect for single-page web apps and one-page scrolling sites that want to highlight products, services or portfolios during the scroll. 

How to use it:

1. Download the plugin and link to the fixed-scroll.js script on your webpage.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src='/path/to/build/fixed-scroll.min.js'></script>

2. Add the data-fixed-section attribute to your content sections and specify the scroll depth using the data-duration attribute.

<div data-fixed-section data-duration="5">
  Section 1
</div>
<div data-fixed-section data-duration="2">
  Section 2
</div>
<div data-fixed-section data-duration="10">
  Section 3
</div>
...

3. Call the function fixedScroll and the plugin will do the rest.

$('[data-fixed-section]').fixedScroll({
  // options here
});

4. Determine whether to pin content sections using CSS. Default: true.

$('[data-fixed-section]').fixedScroll({
  useCSSFixed: false,
});

5. Callback functions.

$('[data-fixed-section]').fixedScroll({
  onEnter: function(index, $element){ 
    console.log('Section enter', index); 
  },
  onExit: function(index, $element){ 
    console.log('Section exit', index); 
  },
  onScroll: function(index, percentage, $element){ 
    console.log('Section index', index, ' scroll progress: ', percentage); 
    $element.find(".text > span").html("(" + (percentage > 0 ? percentage.toFixed(2) : 0) + "%)");
  }
});

---

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