jQuery Plugin For Sticky Sidebars & Navigation - Fixed Content

jQuery Plugin For Sticky Sidebars & Navigation - Fixed Content
File Size: 6.13 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Fixed Content is a lightweght jQuery plugin that makes any DOM element stick to the top of the window when you scroll down.

More features:

  • Fluid width: the sticky element will auto resize to fit its parent container.
  • Mobile friendly: the sticky element will be auto hidden on small screen devices (via minWidth option).

Basic Usage:

1. Include jQuery library and the jQuery fixed content plugin at the bottom of your document, before closing body tag.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src='jquery.fixedcontent.min.js'></script>

2. Wrap the DOM element to be sticky into a container with CSS class of 'js_fixedcontent'.

<div class="sidebar">
  <div class="js_fixedcontent">
    ...
  </div>
</div>

3. Tweak the options to fit your needs.

$(".js_fixedcontent").fixedcontent({

  // The margin between the window and fixed element. 
  marginTop: 24,

  // The breakpoint to disables the plugin.
  minWidth: 767,

  // z-index property
  zIndex: 500

});

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