jQuery Plugin To Make Elements Fixed While Scrolling - makefixed.js

makefixed.js is a small jQuery plugin that provides a simple way to toggle elements to be fixed while scrolling a page. Great for sticky headers, navigation, sidebar and anything.

Basic usage:

1. Import jQuery library and the makefixed.js script at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="makefixed.js"></script>

2. Simple add a class added in MakeFixed selector. In this example, we've added the class .fixed. Also, we have added some extra attributes to customize the element position when it become fixed.

data-mfx-fix-at="100"

3. This gonna make your element fix when it reaches the scroll position of 100 pixels.

data-mfx-top-position="20"

4. This will add a top space of 20 pixels. The full Html:

<div class="fixed" data-mfx-fix-at="100" data-mfx-top-position="20">
  ...
</div>

5. Enable the plugin.

$('.fixed').makeFixed();

6. If you need something more custom, use the callback functions.

$('.fixed').makeFixed({

  onFixed: function (el){
    if ($(el).attr('id') == 'photo'){
      $(el).children().css ({
        width: '500px'
      });
    }
  },

  onUnFixed: function (el){
    if ($(el).attr('id') == 'photo'){
      $(el).children().css({
        width: '450px'
      });
    }
  }

});

About Author:

Author: Guilherme

Website: https://github.com/guimadaleno/makefixed.js

---

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