Fix Any Element To Top Of The Page Using jQuery - scrollFix

scrollFix is a lightweight yet configurable jQuery plugin that fixes any elements (typically header navigation, sidebar component) to the top (and even bottom) of the webpage during page scrolling.

More features:

• Allows to set start and end points.
• Custom positions.
• Auto adds a CSS class 'fixed' to the fixed element.
• Callback functions.

How to use it:

1. Add references to jQuery library and the jQuery scrollFix plugin's script as follow:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jQuery.scrollFix.min.js"></script>

2. Make your site navigation sticky on the top when scrolling down.

$('nav').scrollFix();

3. Specify the start & end points.

$('#side2').scrollFix({
  startObj: 'section',
  endObj: 'footer'
});

4. Make your element sticky at the bottom of the webpage.

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

5. Customize the position when the element gets stuck.

$('nav').scrollFix({
  top: 0,                         
  bottom: 0,
  endPos: 0
});

6. Callback functions.

$('nav').scrollFix({
  fixFn: function() {},           
  fixEndFn: function() {},        
  endFn: function() {}   
});

7. All default customization options.

top: 0,                         
bottom: 0,                      
zindex: 999,                    
startObj: null,                 
position: 'top',                
endObj: null,                   
endPos: 0,                      
fixClass: 'fixed',

---

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