Make a DIV stick when you scroll

I’ve seen this method used a lot around the web and I’ve recently been working on a website where I wanted to incorporate it.  After finding zero results in about a minute of research, I thought this would be a neat topic to write a post about.

So my main concept here is to have a sidebar that would stick to the top of the page once the window was about to pass it by while scrolling. This could be used for dozens of reasons. Perhaps you want to ensure your advertisements are being shown the maximum amount of time possible; or maybe you want to offer your visitors an area of quick-links so they wouldn’t have to scroll to the top of the page to navigate somewhere else.  The site I’m working on is e commerce, so it will be an area to up-sell other products relative to the page the user is viewing.

stick a div when it scrolls

In the code below, I have two DIVs floating that represent the main content area and the sidebar.  Sidebars are usually shorter than the main content area, so this is where my sticky DIV will be.  I give it an id of “sticker” (original, huh?).  With some jQuery, I’m able to fire off a function every time I scroll on the page.  This function calculates my current position, or viewport, or distance from the top.  It also calculates how far from the top my “sticker” div is.  Then, there’s an IF statement that’s fired off…

IF my current position is greater or equal to the “sticker” position, give the sticker div a class of “stick”.  This changes the CSS of the div to have a FIXED position as long as the viewport is lower than the position of the sticker.

HTML – Nothing crazy going on here – a mere 2-column setup

<div id="wrapper">
  <div id="mainContent">
    <!--Content for your main div - like a blog post-->
  </div>
  <div id="sideBar">
    <!--Some content in your right column/sidebar-->
    <div id="sticker">...start scrolling to watch me stick</div>
  </div>
  <div class="clear"></div>
</div>

CSS –  Again, nothing super high-tech – just not the styles applied to div#sticker and the class “.stick”

div#wrapper {
    margin:0 auto;
    width:900px;
    background:#FFF;
}
div#mainContent {
    width:560px;
    padding:20px;
    float:left;
}
div#sideBar {
    width:230px;
    padding:20px;
    margin-left:30px;
    float:left;
}
.clear {
    clear:both;
}
div#sticker {
    padding:20px;
    margin:20px 0;
    background:#AAA;
    width:190px;
}
.stick {
    position:fixed;
    top:0px;
}

jQuery – Calculates the position of the sticker div and makes its position fixed if the page has scrolled that far

$(document).ready(function() {
    var s = $("#sticker");
    var pos = s.position();                   
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        else {
            s.removeClass("stick");
        }
    });
});

Conclusion – I used to think these sticker DIVs were annoying, but I’m coming across more and more ideas to implement them to help the visitor. I have also thrown a demo page together if you want to see it in action. Download zipped source code

UPDATE – per David’s request, the sticker stops at the large footer – demo page 2 – Download zipped source code (2.0)