Fixed Position Elements Plugin for jQuery - Fixer

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

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.