Floating Sidebar Panel Plugin For jQuery - Sticklr.js

Sticklr.js is a simple, flexible, semantic jQuery plugin used to create a floating side panel that will always be visible when scrolling the webpage.

Features:

• Custom icons.
• Light & dark themes.
• Multiple panels.
• Shows on 'click' or 'hover' events.
• Can be attached to the 'left' or 'right' side of the screen.

How to use it:

1. Load a theme CSS of your choice in the document.

<!-- Dark Theme -->
<link href="css/jquery-sticklr-dark-color.css" rel="stylesheet">

<!-- Light Theme -->
<link href="css/jquery-sticklr-light-color.css" rel="stylesheet">

2. Create a nested html list for the floating side panel.

<ul id="example" class="sticklr">
  <li>
    <a href="#" class="icon-addthis" title="This is a floated icon"></a>
    <ul>
      <li class="sticklr-title">
        <a href="#">This is a title</a>
      </li>
      <li>
        <a href="http://www.google.com" class="icon-google">Google</a>
      </li>
      <li>
        <a href="http://www.facebook.com" class="icon-facebook">Facebook</a>
      </li>
      ...
    </ul>
  </li>
</ul>

3. Activate the plugin and done.

$('#example').sticklr();

4. Config the floating side panel with the following options.

$('#example').sticklr({

  // enable animation
  animate         : false,

  // menu height
  menuHeight      : 20,

  // menu width
  menuWidth       : 180,
  relativeGap     : 15,

  // or top/middle/ground
  relativeTo      : 'center',

  // or hover
  showOn        : 'click',

  // or right
  stickTo         : 'left',

  // tab height
  tabHeight       : 16,

  // tab width
  tabWidth        : 16
  
});

---

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