How to Create a Sticky Scrolling with jQuery Plugin – Jquery.smartSticky

1. To get began, embrace jQuery library and the goodSticky plugin’s information on the web page.

<!-- jQuery -->
<script src="/path/to/jquery.slim.min.js"></script>
<!-- smartSticky information -->
<script src="/path/to/dist/js/jquery.smartSticky.min.js"></script>
<link rel="stylesheet" href="/path/to/dist/css/jquery.smartSticky.min.css" />

2. Just connect the perform goodSticky perform to the factor which must be sticky on web page scroll and down.

<div class="sticky-smart-demo">
  My Sticky Content
</div>

$('.sticky-smart-demo').smartSticky(
  // options here
);

3. Pin the factor on the backside of the web page and only present it when the web page scrolls up.

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: 'bottom',
    scrolling: {
      up: true,
      down: false
    }
  }
});

4. Toggle the place of the sticky factor relying on the scroll course.

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: 'toggle',
    scrolling: {
      up: true
    }
  }
});

5. Override the default delay time in ms.

$('.sticky-smart-demo').smartSticky({
  show: {
    delay: 400
  }
});

6. Stretch the factor to the total width when getting caught.

$('.sticky-smart-demo').smartSticky({
  container: function (manager) 
    return manager.elem.closest('.row');
  
});

7. Make the factor sticky above the unique place.

$('.sticky-smart-demo').smartSticky({
  show: {
    original: {
      above: true
    }
  }
});

8. Customize the CSS types relying on the present Sticky state.

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: 'bottom',
    scrolling: function (manager, scrollingBottom) {
      if (scrollingBottom) 
      else 
      return true;
    }
}
}).on('smartSticky.deactivate', function () 
  $(this).css('color', 'black');
);

9. All default customization choices.

$('.sticky-smart-demo').smartSticky({
  show: {
    delay: 50,
    immediately: false,
    original: ,
    fixed: 'top',
    scrolling: {
      up: false,
      down: true
    }
  },
  container: null,
  css: {
    classes: 
      placeholder: 'sticky-smart-placeholder',
      root: 'sticky-smart',
      invisible: 'sticky-smart-invisible',
      active: 'sticky-smart-active',
      background: 'sticky-smart-background',
      container: 'sticky-smart-container'
    ,
    fixed: {
      width: false,
      left: false
    }
  }
});

10. Make the factor mounted on the backside solely on cell gadgets (display size < 768px).

$('.sticky-smart-demo').smartSticky({
  show: {
    fixed: function () {
      if ($(window).width() < 768) 
        return 'bottom';
      
    },
    scrolling: function (manager, scrollingBottom) {
      if ($(window).width() < 768) {
        return !scrollingBottom;
      }
      return scrollingBottom;
    }
  }
});

11. Enable & disable the plugin programmatically.

instance.smartSticky('disable');
instance.smartSticky('enable');

12. Update the choices.

instance.smartSticky('setOptions', 
  // choices here
);

13. Hide the sticky factor.

instance.smartSticky('hide');

14. Event handlers.

$('.sticky-smart-demo').smartSticky(
  // choices here
).on('smartSticky.activate', function () 
  // do one thing
).on('smartSticky.deactivate', function () 
  // do one thing
).on('smartSticky.activated', function () 
  // do one thing
).on('smartSticky.deactivated', function () 
  // do one thing
).on('smartSticky.init', function () 
  // do one thing
);

Changelog:

v2.6.0 (2020-07-23)

• overflowing container customization, bugfixes

v2.4.0 (2020-07-04)

• help of mounted header in tables, higher occasion dealing with

v2.3.0 (2020-06-30)

• IE bugfixes, simplification

v2.1.1 (2020-05-16)

• Added managers and callbacks
• Fixed IE
• Refactor yCoord

v2.0.0 (2020-05-14)

• Bugfix default settings, help of interior overflowing container, refactor, defining personal placement positions callbacks help

v1.3.1 (2020-05-01)

• Bugs mounted
• Added extra strategies.

v1.0.2 (2020-05-01)

• optimalization, refactoring, renaming

See Demo And Download