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

• 22 signs you're NOT addicted to design
• Expanding a HTML form using JavaScript
• Happy 1st anniversary Marcofolio.net
• Being #2 top blogger under 21
• RapidShare: Cutest but lamest CAPTCHA

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   | 213.10.233.xxx | 2007-12-24 23:20:29 Hé EB, IE7 is giving me bupkiss here. Care to explain? Reply | Quote 0   0

Marco - re:   | 62.194.187.xxx | 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 1   0

Marco - Fixed   | 62.194.187.xxx | 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 0   0

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

rdiz - Better fix   | 75.36.175.xxx | 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 0   0

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

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge
	Please input the anti-spam code that you can read in the image.

Unsubscribe from e-mail notifications.