jQuery Contained Sticky Sidebar Plugin - stickyMojo

stickyMojo is a lightweight jQuery plugin for creating a Contained Sticky Sidebar on your webpage. It is fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. 

Usage:

1. Include jQuery Library and stickyMojo.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="stickyMojo.js"></script>

2. The CSS

<style type="text/css">
body {
margin: 0;
padding: 0;
}
#main {
width: 750px;
height: 750px; /*can be anything, just should make sure it is taller than the sidebar*/
padding: 25px;
float: left;
background-color: #fafafa;
}
#sidebar {
width: 120px;
background-color: #ccc;
min-height: 200px;
margin: 10px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/
padding: 15px 10px;
float: left; /* float right for a right aligned sidebar */
}
#footer {
width: 940px;
clear: both;
background-color: #ccc;
height: 500px;
margin-top: 100px;
}
#wrapper {
width: 940px; /* MUST HAVE WIDTH SET, should be the sidebar width + main width */
margin-left: auto;
margin-right: auto;
}
</style>

3. Markup

<div id="wrapper">
 
<div id="sidebar">
<p>sidebar</p>
</div>
 
<div id="main">
<p>main</p>
</div>
 
<div id="footer">
Footer
</div>
 
</div>

4. Call the plugin with options.

$(document).ready(function(){
  $('#sidebar').stickyMojo({
  footerID: '#footer', 
  contentID: '#main',
  orientation: $(this).css('float'),
  offsetTop: 0
  });
});

Change log:

2014-10-16

• added an offset for a fixed header.

---

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