Make a DIV stick when you scroll

Posted on by

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.

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

<divid="wrapper">

<divid="mainContent">

<!--Content for your main div - like a blog post-->

</div>

<divid="sideBar">

<!--Some content in your right column/sidebar-->

<divid="sticker">...start scrolling to watch me stick</div>

</div>

<divclass="clear"></div>

</div>

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

div#wrapper {

margin:0auto;

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:20px0;

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

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

PixelBind is a website company that was founded in July of 2011 in Myrtle Beach, South Carolina. We are proud to say that we’re here to make the web a better place. We strongly believe that a website is your first impression to the world, and it should be a good one; one that someone should remember, because the world is full of competition. PixelBind ensures that you’re remembered by presenting your audience a damn good website.