stickyMojo contained fixed position sticky sidebar jquery plugin

Introduction

stickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE.

Background

After looking around for a contained fixed position sticky sidebar for our blog we found that there were few options that handled all of the intricacies of cross-browser support, window resizing, and smoothness.

One of the solutions that many people have come up with is to have the sidebar be positioned absolutely, then animate the top property. Although this solution worked, it looked jankey compared to fixed position element.

The problem with a simply "fixed" positioned element is that it doesn't react well to a scroll or window resize. In many cases the sidebar will overlap elements such as the footer or content area. Generally this is not the intended effect.

Luckily we've got stickyMojo.

Getting Started: Get the Script

First you need to get yourself the code.

You will then need to include jQuery. Afterwards, implement the code by including the javascript file, note you will have to make sure the src path is correct

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

Setting up the HTML

Next you are going to want to setup your HTML structure. stickyMojo does its best to give you as much flexibility in your HTML structure. At minimum you will need:

    <div id="wrapper">

      <div id="sidebar">
        <p>sidebar</p>
      </div>

      <div id="main">
        <p>main</p>
      </div>

      <div id="footer">
        Footer
      </div>

    </div>

Configuring your CSS

Next you are going to need some CSS. Again, we have worked hard to make styling as flexible as possible. Some important things to remember:

You can use whatever ID's you want but the overall structure should be a sidebar div and main content div inside a wrapper div.
The wrapper must have a width
The sidebar must have either a float: left; (left sidebar) or a float:right; for a right aligned sidebar
The sidebar margin-top and margin-bottom control the cutt off for when the sidebar starts and stops sticking.

Here's some of the basics in CSS, you will want to modify this to fit your needs.

      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;
      }

Javascript Initiation

Finally, you need to initialize the sidebar using the $(document).ready(); function of jQuery. To do so simply add the following just before the </body> tag in you HTML

        <script>
          $(document).ready(function(){
            $('#sidebar').stickyMojo({footerID: '#footer', contentID: '#main'});
          });
        </script>

Questions or comments?

For questions or comments please visit the Mojo Blog.