jQuery Contained Sticky Sidebar Plugin - stickyMojo

File Size: 3.79 KB
Views Total: 4210
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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+. 


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;

3. Markup

<div id="wrapper">
<div id="sidebar">
<div id="main">
<div id="footer">

4. Call the plugin with options.

  footerID: '#footer', 
  contentID: '#main',
  orientation: $(this).css('float'),
  offsetTop: 0

Change log:


  • 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.