jQuery Plugin To Make Anything Sticky On Scroll - ScrollFix

ScrollFix is a simple-to-use yet fully configurable jQuery 'Sticky' plugin which makes any DOM elements (for instance header navigation, footer widgets) stick at the top or bottom of the page when scrolling.

More features:

• Custom CSS styles when the element is fixed.
• Responsive design.
• Useful event handlers.

Install & Download:

# NPM
$ npm install jquery-scrollfix --save

# Bower
$ bower install jquery-scrollfix --save

How to use it:

1. Include the JavaScript file ScrollFix after jQuery library.

<script src="http://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
        crossorigin="anonymous">
</script>
<script src="src/scrollfix.js"></script>

2. Call the function on the target element which should be fixed at the top of the web page.

$('.top-nav').scrollFix();

3. If you want to make an element sticky at the bottom of the page instead.

$('.footer').scrollFix({
  side: 'bottom'
});

4. Sometimes you might need to make the element be fixed at both top and bottom of the page:

$('.element').scrollFix({
  side: 'both'
});

5. Set the top & bottom offsets when fixed.

$('.top-nav').scrollFix({
  side: 'bottom',
  topPosition: 50, 
  bottomPosition: 50
});

6. More configuration options with default values.

$('.top-nav').scrollFix({

  // CSS classes when fixed
  topFixClass: 'scrollfix-top',
  bottomFixClass: 'scrollfix-bottom',

  // CSS Class added to the invisible substitute
  substituteClass: 'scrollfix-subtitute',
  
  // Offsets to trigger the 'sticky' behavior
  topFixOffset: null,
  topUnfixOffset: null,
  bottomFixOffset: null,
  bottomUnfixOffset: null,

  // synchronizes width with the substitute when the element is fixed
  syncSize: true,

  // Synchronize horizontal position with the substitute when the element is fixed
  syncPosition: true,

  // Use inline styles to set position and top or bottom offsets
  style: true,

  // Use inline styles to set visibility and height of the substitute when it's created
  styleSubstitute: true

});

7. Possible events.

$('.top-nav').scrollFix({
  // options here
})

.on( "fix.shira.scrollfix", function() {
  // before fixed
});

.on( "fixed.shira.scrollfix", function() {
  // after fixed
});

.on( "update.shira.scrollfix", function() {
  // after updated
});

.on( "unfix.shira.scrollfix", function() {
  // before unfixed
});

.on( "unfixed.shira.scrollfix", function() {
  // after unfixed
});

Changelog:

2018-09-23

• Fix fixing element whose box-sizing is border-box

 

---

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