Generic Floating Element Plugin - jQuery float-bar.js

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.