Grow your CSS skills. Land your dream job.

Scroll/Follow Sidebar, Multiple Techniques

Published by Chris Coyier

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.

Comments

  1. Al
    Permalink to comment#

    I knew I had seen something similar before:

    Floating Menus

    nice effect

    Al

  2. Bill
    Permalink to comment#

    Personally I’ve often found this type of effect annoying and used for ads and to get you to sign up for something. It’s like a bee that won’t stop following you on a nice walk. I think this effect first appeared back on Geocities in the mid 1990′s.

    • I’m with you there, I hate when it’s used for ads. It can be used in good ways though, like the example of maxvoltar.com.

      I prefer the CSS method, which feels more “fixed” unlike the JS method that moves around, which can be distracting. But that can have its uses too.

      All in all, nice technique to have in the toolbox.

  3. Permalink to comment#

    My favorite is still the pure CSS ! But the reveal is cool as well ! :-)

  4. Great Post, I was looking for a javascript solution for this effect for quite some time. You can see a similar effect on the BlackEstate web site.

    Thanks for sharing in any case :)

  5. Permalink to comment#

    Ive never been a fan of the following menu/ads down the side of websites. But if used wisely it can be very effective towards the design of your site. Ive tried using it a few times, one was for an image gallery and they wanted 5/6 images down the page and when scrolling down the thumbnails for the next page would follow and worked quite nicely. you can create some great stuff with it. Try having an image of a bungee jumper down the side and everytime you scroll down he will fall further haha. im sure theres a way of using the jQuery to add some kind of bounce effect too?!

  6. Permalink to comment#

    A few weeks ago Remy Sharp wrote a similar post on jQuery for Designers. He called the effect “fixed floating elements”. In his example he fixes that jerking effect when you scroll, as Damian Web pointed out.

    • Jurriaan
      Permalink to comment#

      I agree with the jerking effect. It distracts the eye too much if you are scrolling while reading a text block.

  7. Permalink to comment#

    I am a big fan of the “reveal” technique, especially for widgets that scroll their content horizontally. Never seen it used this way before – very cool.

  8. Permalink to comment#

    Awesome technique and break down :-) Will be using this for future projects~!

  9. SpeedGun
    Permalink to comment#

    Thanks for the walk through.

  10. Wow! great article Chris, any html5 articles coming up soon?

  11. I loved this article, exactly what I’ve been looking for. I did run into a hiccup, the included jquery library with wordpress would not work for me, I had to call google’s jquery library, now I am looking for code to remove the included file from wp_head or replace the wp_head function to call the google library instead, using functions.php, any guesses???

  12. Permalink to comment#

    Wow!! Nice!!!

  13. Permalink to comment#

    ya never cease to impress or keep me learning, as i’ve been wondering how to go about this, really great write up!

    appreciate your time & dedication to all this designing, coding, & writing/bloging you do so much!

    keep it up, frequent visitor beyond content & adapting in new skills :)
    just wish you’d post a lot more!!! to bad your not a robot… or are you!? haha jk

  14. Permalink to comment#

    Nice! Gone try to use the “jQuery” versjon on my next project.

    Question: Is it possible to make it stop?
    I mean, if I have it in the sidebar on a page with a long footer (or on a tiny screen). It will just push the footer down so you can’t see the whole footer.

    Hope someone understand my problem! Thanks!

    • I also experienced the same problem.
      if anyone who knows how to deal with fixed footer?
      Before i say thanks for share*

    • Permalink to comment#

      Ran into the same problem with a tall footer, but I’m not skilled enough in .js to sort out how to get it to stop. Any ideas?

    • Devin
      Permalink to comment#

      Did anyone ever find a solution to this?

  15. Very good technique!

  16. Nice post, I didn’t thougth about the jQuery one. I love the window scrollTop function (didn’t know it existed).

    I imagine you could do something like that to achieve the effect like dafont (.com) with the ad banner on the left.

  17. Permalink to comment#

    Unreal, I was only thinking of doing this on our site yesterday for all social media icons on the blog pages.

    You just saved me some time, many thanks.

    Steve

  18. I’ve always wanted to know how to do this!

  19. Permalink to comment#

    wow .. that was awesome trick .. reveal was awesome !

  20. Michele
    Permalink to comment#

    How about a Javascript version without the “bounce” ? Like on the store.apple.com website when you’re configuring a computer?

  21. Permalink to comment#

    fantastic. thx for the tricks. ^_^

  22. Great effect, Thanks

  23. Permalink to comment#

    Thanks for this article. Especially the jQuery animated version was very helpful for me!

  24. Permalink to comment#

    I’m looking for a code like facebook sidebar. This is very close but what if sidebar is higher than the screen size. For an example, login your facebook profile page and scroll down. When the left widgets finished at the end its starting to follow your scroll and its doing the same thing at reverse direction.
    Can this post editable for like this…?

  25. Permalink to comment#

    Is it possible to add a “close” function so that people can close and open the floating thing if they dont want to continue seeing it?

  26. Lewis Wallis
    Permalink to comment#

    Thanks this helped a lot, although I found that the sidebar was moving left or right if the browser window was changed in size. Instead I applied the “position: fixed” to the widget area within the sidebar which achieved the same result without the unwanted sideways movement. Thanks for the post.

  27. Permalink to comment#

    There’s now “position:sticky” that allows you to do that, it’s supported in Firefox (beta i think), and Webkit browsers.

  28. Permalink to comment#

    I had to implement a similar sidebar navigation into a project, so I created a plugin for it: https://github.com/fillswitch/Jquery-Sidebar-Page-Navigation

    Hope this helps anyone else out in the future!

  29. Stefan
    Permalink to comment#

    For sure every time (onscroll event) calculate offset.top

  30. and even
    $(function() {

        var $sidebar   = $("#sidebar"), 
            $window    = $(window),
            offset     = $sidebar.offset(),
            topPadding = 15;
    
        $window.scroll(function() {
            var deltaTop = $window.scrollTop() - offset.top;
            $sidebar.stop().animate({
                marginTop: deltaTop ? deltaTop + topPadding : 0;
            });
        });
    });
    
  31. Is it possible to add a “close” function so that people can close and open the floating thing if they dont want to continue seeing it? And make it remain closed if use moves from page to page until they click to open it.

  32. Hi Chris, the link that points to the JQuery plugin is broken, you may, or may not want to fix this.

  33. Your jquery solution here saved my butt in a dynamic angularjs application. Thanks so much!!

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".