jQuery Plugin To Fix Any Elements On The Top - Fixit

Fixit is a lightweight and easy-to-use jQuery plugin which helps you fix any element (e.g. navigation, sidebar, etc.) on the top of the webpage according to the options passed. You can also add class to the element when it is fixed. It also trigger events when element is "fixed" and "unfixed".

How to use it:

1. Add the jQuery Fixit plugin's script after you've added jQuery library.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery.fixit.js"></script>

2. Each element to be fixed must have an unique ID as follow:

<div id="demo">
  ...
</div>

3. Just call the fixit() function and the plugin will do the rest.

$("#demo").fixit();

4. Add a custom space between your element and the page top.

$("#demo").fixit({
  topMargin  :  30
});

5. Add a custom CSS class to your element when fixed.

$("#demo").fixit({
  addClassAfter : 'my-class'
});

6. Determine if the dimension of the element should be same after it is fixed.

$("#demo").fixit({
  sameDimension : true
});

7. Set the stack order of your element when fixed.

$("#demo").fixit({
  zIndex : 999
});

8. More options.

$("#demo").fixit({
  offset: 0,
  reset: false,
  direction: false, // down or up
});

9. Events available.

$("#demo").on("fixed",function(){
  // when fixed
});

$("#demo").on("unfixed",function(){
  // when unfixed
});

Change log:

2018-03-21

• Added missing “px” to pixel values

2017-06-14

• Added: direction, reset, offset option and refactored the code.

2017-05-10

• minor fixes

---

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