After my previous article on how to create a peeling corner on your website, I now give you another great thing for your website. I'll explain how to create a sticky sidebar or box that will scroll down with the user. Excellent to put your navigation in, promoting your RSS Feed or placing advertisement.

This technique uses CSS and JavaScript. Works in IE7+, Firefox, Opera and Safari.

If you're reading this, you should be able to see the sticky sidebar on the top-right corner of this page. It'll scroll down with you, but will stop when you scroll up untill the line of my header.

When you're using IE7, please go directly to the demo page to see it working correct. IE7 needs the correct DOCTYPE to make it work and the doctype from my website is another one than the one required for this effect.

The CSS

Copy the following CSS code:

#content {
  position:absolute;
  right: 0;
  top: 221px;
  width: 150px;
  padding: 0 30px 50px 15px;
  font-size: small;
  color: #FFFFFF;
}
 
.sidebox {
  background: #92A4AE no-repeat left bottom;
}

Change the number "221" to the position you want your sidebar to be stuck on. I had it on 221 since it's the height of my header.

The JavaScript

To get this to work, I used the MooTools framework. Next, I added some additional code.

Select the code above and save it as sidebar.js.

Again, change the number "221" to the position you want your sidebar to be stuck on, just like with the CSS code.

Uploading the files

Now you're all set to upload the files to your web server. Upload the following files:

1. mootools.js
2. sidebar.css (Or implement it in your template CSS)
3. sidebar.js

Installing on your site

Now add the following line in to your webpage. Make sure your source (src) direction is correct.

<script type="text/javascript" src="sidebar.js"></script>
<script type="text/javascript" src="mootools.js"></script>

That's it! Refresh your page and you should now have your own sticky sidebar on your webpage. Feel free to change the CSS or JavaScript code to your own needs.

There's one catch: It doesn't work in Internet Explorer 6. But since Firefox is taking of the world and IE7 is now more and more used, I still wanted to post this article.

Attached files:

Download Source

View Demo

Where are you going to use the sticky sidebar for?

Interested in this topic? You might enjoy another article I've written called

• Best of the Best: 2009
• Sweet tabbed navigation using CSS3
• Browser size aware content scaling
• 8 different ways to beautifully style your lists
• On being Developer and Designer with Jacob Gube

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New Search RSS

Ape   2007-12-24 23:20:29 Hé EB, IE7 is giving me bupkiss here. Care to explain? Reply | Quote

Marco - re:   2007-12-24 23:49:55 Thanks for noticing, you're right. Strange, I tested it before and it worked correct I'll re-check it tomorrow, sorry for the inconvenience! Check back later. Greetings, Marco Reply | Quote

Marco - Fixed   2007-12-28 12:02:22 Hello, Fixed the problem from Internet Explorer 7. It was the improper use of the DOCTYPE. My website has another doctype than the one that it used for this effect. Please go to the demo page to see the effect working on IE7. Greetings, Reply | Quote

Jape   2007-12-31 12:16:58 Works like a charm now. I'll see you in a few weeks Reply | Quote

rdiz - Better fix   2008-03-18 00:23:37 IE7 would create a huge horizontal scroll for me and when scrolling to the top of the page quickly the box would over shoot before snapping back down into position. I fixed the IE7 problem and improved the snapping by changing $('content').style.position = 'absolute'; $('content').style.top = '221px'; to: $('content').style.position = 'static'; Thanks for the code. Enjoy Reply | Quote

wfrostfire - Not scrolling in IE6   2008-05-23 04:12:34 Dude, it doesnt move on IE6.. Reply | Quote

vaQ - div jumps out in ie7   2008-08-18 13:06:51 hi there, i implemented your nice sticky box on my site. in FF and safari its working perfectly thx. but i got a problem with the ie7. could you have a look on the link i sendet to you and help me up? thanks Reply | Quote

rw - cld u add an open close effect?   2009-01-27 16:43:23 this looks nice and neat! would u know how to make it appear as a tab at first and slide out when clicked? thanks! Reply | Quote

Binh Nguyen - Too heavy   2009-05-13 19:13:30 Hi, I'm looking for a sticky sidebar solution and found yours through Google. What I can say is it look great. Thanks for sharing it. However, after dowloading the mootools framwork I found out it's 65KB. This is a little too heavy for such a simple function. Heavy in term it's 3 times bigger than all the HTML added up. I know that a standard photo nowadays also is 65KB, but all my graphics added up didn't make 65KB... So it's a great solution already but may I ask if you know of some other script that's smaller? Thanks again and cheers, Binh Reply | Quote

Binh Nguyen - Fixed style   2009-05-13 19:35:39 Hello, Sorry I submit the second comment so quickly. I tested your script and it turned out there is some error in your post. Or should I say, incompatible to other HTML elements. If you make a sidebox you should name the CSS style #sidebox, not #content. I copy and pasted it to my page it it floated my entire page content, except the header and footer. That's it. Thanks for sharing this great script. Regards, Binh Reply | Quote

Jono   2009-06-09 12:37:28 hey there thanks for this, but why is it always behind other graphics on the website, like if it scrolls past an it will go behind it.. it's kinda weird but, help? Reply | Quote

hombertho   2009-07-08 18:03:12 Thanx for the great piece of Code. It was exactly what i am searching for. It works perfectly but i have a small question. Is it possible that the sticky sidebar will not move to the top of the page when scrolling? I want to have a small gap on the top of the box and the Browser. I am not sure wich value i have to change? Thank you very much... ...Thomas :-) Reply | Quote

havban - Thnx   2009-07-21 21:47:18 Thnx.. great and simple code.. success on first trial.. ^^ Reply | Quote

Swimmer - menu niet helemaal te zien   2009-08-27 15:23:08 Als ik onderstaande code in jou html file neer zet kan je niet heel het menu zien (je ziet maar tot en met AB als je met resolutie 1024*768 werkt. hoe kan ik dat oplossen? heb je een idee. Verder wil ik je wel bedanken voor deze code Hi! This is a demo page from Marcofolio.net. Home Gastenboek A B C D E F G H I J K L M N O P Q R S T U V W X Y Z AA AB AC AD AE Reply | Quote

isaak - ie 7 won't load the proper width   2009-12-09 04:11:28 help ie7 won't load the proper width that I set it to- chrome google works fine how do i fix this problem? Reply | Quote

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge

Unsubscribe from e-mail notifications.