Generic Floating Element Plugin - jQuery float-bar.js
File Size: | 4.52 KB |
---|---|
Views Total: | 1104 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A small and customizable jQuery plugin for creating floating elements that will be always visible no matter how you scroll down/up the webpage.
The plugin supports 9 position combinations using CSS horizontal & vertical align.
How to use it:
1. Include the float-bar.js plugin after loading the latest jQuery library.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="float-bar.js"></script>
2. Attach the plugin to the element that should be sticky.
<div class="test"> I am sticky </div>
$(function(){ $('.test').floatBar() });
3. Set the alignment of the sticky element.
$(function(){ $('.test').floatBar({ // 'left', 'center', 'right' align: "right", // 'middle', 'top', 'bottom' vertical: "middle" }) });
4. Set the z-index property of the sticky element.
$(function(){ $('.test').floatBar({ zIndex: 999 }) });
5. Add additional CSS styles to the sticky element.
$(function(){ $('.test').floatBar({ css: { // css rules here } }) });
6. Add a unique ID to the wrapper element. Default: null.
$(function(){ $('.test').floatBar({ id: 'demo' }) });
This awesome jQuery plugin is developed by bosscheng. For more Advanced Usages, please check the demo page or visit the official website.