Fixed Position Elements Plugin for jQuery - Fixer

File Size: 5.41KB
Views Total: 2414
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fixed Position Elements Plugin for jQuery - Fixer

Fixer is a lightweight and simple jQuery plugin that allows you to add any element (div, ect...) with fixed position on scroll to your web page. It's good for creating and displaying sticky top navigation menu, side bar, notification bar to meet your requirements.

How to use it:

1. Markup HTML structure

<div class="content">
<div class="side"></div>
<div class="main"></div>
</div>

2. The CSS

.content {
position: relative;
float: right;
width: 100%;
height: 600px;
margin: 0 0 10px -110px;
}
.main {
height: 600px;
margin-left: 110px;
background: #ddd;
}
.side {
position: absolute;
top: 0;
width: 100px;
height: 300px;
margin: 0 10px 0 0;
background: indigo;
}

3. Include jQuery Library and Fixer.js

<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script> 
<script src='jquery.fixer.js'></script> 

4. Call the plugin

<script>
        $(function() {
            $('.side').fixer({
                gap: 10
            });
        });
</script>

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