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

File Size: 6.83 KB
Views Total: 1292
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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


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">

5. Enable the plugin.


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


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

  onUnFixed: function (el){
    if ($(el).attr('id') == 'photo'){
        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.