Scroll/Follow Sidebar, Multiple Techniques

Really simple concept today folks! A sidebar that “follows” as you scroll down a page. There are a number of ways to go about it. We’ll cover two: CSS and JavaScript (jQuery) with a bonus CSS trick.

View Demo   Download Files

CSS

The easiest way to handle this is just to use CSS fixed positioning. Our sidebar is within a #page-wrap div with relative positioning, so the sidebar will set inside there, then we just push it over into place with margin.

#page-wrap { 
  width: 600px; 
  margin: 15px auto; 
  position: relative; 
}

#sidebar { 
  width: 190px; 
  position: fixed; 
  margin-left: 410px; 
}

With this technique, the sidebar stays solidly in place as you scroll down the page.

jQuery

If we use JavaScript, we can measure how far down the window the user has scrolled after a window.scroll event. If that distance is further than the starting top position of the sidebar, we can adjust the top margin of the sidebar to push it down into visible range.

Optimized by Doug Neiner:

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
    
});

There is no particular advantage here other than the cool animated effect we get, which will certainly draw attention to it.

Bonus “reveal” technique

On Tim Van Damme’s Maxvoltar.com individual blog posts have a special sidebar with a fun “reveal” effect when the page is scrolled down.

The trick is to have a header area with a solid background sit on top of the sidebar, which is pulled up underneath it. You could use negative top margin to do it or adjust the top positioning value. Then an alpha transparent white-fade image is carefully placed at the top of the sidebar, and also z-index’d above it. So when the top of the sidebar, hidden by the header, slides down into view the white-fade image “reveals” it.

/* Negative top margin on sidebar pulls up header under title-area */
#sidebar { 
  width: 190px; 
  position: fixed; 
  margin: -135px 0 0 410px; 
}

/* Title area kept above all with z-index */
#title-area { 
  background: white; 
  position: relative; 
  z-index: 3000; 
}

/* white-fade image */
#reveal { 
  position: absolute; 
  right: 0; 
  bottom: -20px; 
}

Concerns

In any of these techniques, we are essentially dealing with fixed positioning. Fixed positioning “real” content (as opposed to, for example, a background image) is slightly dangerous territory. We need to be very sure that the content we are fixed positioning will never be taller than the viewable area of even a very small monitor. If the height were to exceed that visible area, it would be completely hidden an inaccessible, beyond the edge of the browser window. With non-fixed positioned elements, that overhang would trigger a scrollbar, fixed position elements do not.

Cross-Browser Hoo-Hah

This should work in “all” browsers. For IE 6 and IE 7 I put in some conditional comments for some extra CSS to get them to behave. Feel free to view source in the demo to check that out. This is a nice demo to reference for fixed positioning in IE 6 (basically you need to have an extra outer wrap of the page and use absolute positioning to fake it).

MooTools

David Walsh in on the case with a MooTools version of the Scrolling Sidebar.

jQuery Plugin

There is also a jQuery plugin in the repository that accomplishes this same thing, with a bonus cool feature where it stops before hitting the footer.

That link is now broken, but here’s a big roundup of jQuery plugins that do the same type of thing.