jQuery Plugin For Sticky Sidebars & Navigation - Fixed Content
File Size: | 6.13 KB |
---|---|
Views Total: | 1544 |
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.