Fixed Element

Make an element on your page always stay visible
With this plugin you can fix an element everywhere you want on the page - fixed header, footer, sidebar, menu.
All you have to do is select the element with jQuery and choose where you want to place it.
You can set the 'placement' to top, bottom, left or right and if you want to set some offset you can manually do that with the 'top', 'bottom', 'left' or 'right' options.
You can set the distance between the top of the page and the scrolled position on which the element will be fixed.
There is an option to get the width of another element and set this width on the fixed element.
For the whole functionality of Fixed Element, see documentation.

How to use

1. Load jQuery and include Fixed Element plugin files
<script src="jquery.js" type="text/javascript"></script>
<script src="fixed-element.min.js" type="text/javascript"></script>
2. Set up your HTML
<div id="fixed-element">Fixed element</div>
3. Call the plugin
<script type="text/javascript">
    $(document).ready(function() {
        $("#fixed-element").fixedElement();
    });
</script>

Examples

Placement
How to position your Fixed element - top, right, bottom, left
<script type="text/javascript">
    $(document).ready(function() {
        $("#footer").fixedElement({
            placement: "bottom"
        });
    });
</script>
View demo - Placement
Activate On, Get and set Width
When the user scrolls to specific height from the top of the page - activateOn
Choose an element to take its width and set it to the Fixed element - getWidthOnElement
<script type="text/javascript">
    $(document).ready(function() {
        $("#fixed-left").fixedElement({
            placement: 'left',
            activateOn:57,
            getWidthOnElement:'.left-col',
        });
    });
</script>
View demo - Activate On, Get and set Width
Offset
Set offset between window and element with these options: top, right, bottom, left
<script type="text/javascript">
    $(document).ready(function() {
        $("#fixed-left").fixedElement({
            bottom:40
        });
    });
</script>
View demo - Offset
Height in normal and fixed state
The normalHeight option sets the heigh of the selected element when it is not fixed.
When fixed, the fixedHeight option sets the height when the fixed functionality is active.

When the two options are used there is a transition between the two states.
<script type="text/javascript">
    $(document).ready(function() {
        $("#fixed-left").fixedElement({
            fixedHeight: 40,
            normalHeight: 60,
        });
    });
</script>
View demo - Height in normal and fixed state
Github Download Documentation