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