A Smart jQuery Plugin For Fixed Position Elements - Auto Fix Anything

File Size: 14.7 KB
Views Total: 1436
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
A Smart jQuery Plugin For Fixed Position Elements - Auto Fix Anything

Auto Fix Anything is a lightweight yet smart jQuery plugin that automatically fix or unfix the position of any html containers like header, sidebar, footer, etc.

Basic Usage:

1. Include the latest jQuery javascript library from google CDN in your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include jQuery auto fix anything script and stylesheet files in your document.

<script type="text/javascript" src="jquery.autofix_anything.js"></script>
<link href="autofix_anything.css" rel="stylesheet" type="text/css">

3. Create a container that will be fixed at the top of its patent container.

<div class="wrapper">
    <div class="header-demo">
    ...
    </div>
</div>

4. Just call the plugin and you're done.

<script>
$(document).ready( function() {
$(".wrapper .header-demo").autofix_anything();
});
</script>

5. Available options.

<script>
$(document).ready( function() {
$(".wrapper .header-demo").autofix_anything({
customOffset: false, // You can define custom offset for when you want the container to be fixed. This option takes the number of pixels from the top of the page. The default value is false which the plugin will automatically fix the container when the it is in the viewport
manual: false, // Toggle this to true if you wish to manually fix containers with the public method. Default value is false
onlyInContainer: true // Set this to false if you don't want the fixed container to limit itself to the parent's container.
});
});
</script>

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