Creating A Fixed Position Sidebar With jQuery Sticky Sidebar Plugin

Creating A Fixed Position Sidebar With jQuery Sticky Sidebar Plugin
File Size: 12.6KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Sticky Sidebar is a lightweight and super simple jQuery plugin for creating a sticky right (or left) sidebar that follows the user as the user scrolls down the page.

Basic Usage:

1. Create the html for your sidebar.

<aside id="sidebar">
<div class="inside">
<h2>Title 1</h2>
<p>Content</p>
</div>
</aside>

2. The sample CSS for the sidebar.

aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #f4f4f4;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}

3. Load the stickySidebar.js at the bottom but after jQuery library.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/stickySidebar.js"></script> 

4. Call the plugin.

<script>
$(document).ready(function() {

$('#sidebar').stickySidebar({
sidebarTopMargin: 20, // defines top margin from sidebar to navigation element (20px by default)
footerThreshold: 100 // defines a distance from footer (40px by default)
});

});
</script>

5. All the options.

<script>
$(document).ready(function() {

$('#sidebar').stickySidebar({
headerSelector: 'header', // defines header section (‘header’ by default)
navSelector: 'nav', // defines navigation (‘nav’ by default)
contentSelector: '#content', // defines content section (‘#content’ by default)
footerSelector: 'footer', // defines footer section (‘footer’ by default)
sidebarTopMargin: 20, // defines top margin from sidebar to navigation element (20px by default)
footerThreshold: 100 // defines a distance from footer (40px by default)
});

});
</script>

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