Fork me on GitHub

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:

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.

.