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

File Size: 48.9 KB
Views Total: 138
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 data-fixed-section data-duration="2">
  Section 2
<div data-fixed-section data-duration="10">
  Section 3

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

  // options here

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

  useCSSFixed: false,

5. Callback functions.

  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.