Home
Create a sticky sidebar or box

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.

Sticky sidebar or box

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;
}
and save it as sidebar.css.

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:

SourceDownload Source

DemoView Demo

Where are you going to use the sticky sidebar for?



Tags:  sticky sidebar webdesign website internet how to

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

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

Spread the word and submit to:
Reddit!Del.icio.us!Facebook!Technorati!StumbleUpon!Newsvine!Furl!Ma.gnolia!
Comments
Add NewSearchRSS
Ape   | 213.10.233.xxx | 2007-12-24 23:20:29
Gravatar image Hé EB, IE7 is giving me bupkiss here. Care to explain?
Marco - re:   | 62.194.187.xxx | 2007-12-24 23:49:55
Gravatar image Thanks for noticing, you're right.

Strange, I tested it before and it worked correct :roll:

I'll re-check it tomorrow, sorry for the inconvenience! Check back later.

Greetings,
Marco
Marco - Fixed   | 62.194.187.xxx | 2007-12-28 12:02:22
Gravatar image 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,
Jape   | 213.10.233.xxx | 2007-12-31 12:16:58
Gravatar image Works like a charm now. I'll see you in a few weeks
rdiz - Better fix   | 75.36.175.xxx | 2008-03-18 00:23:37
Gravatar image 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 :)
wfrostfire - Not scrolling in IE6   | 222.127.223.xxx | 2008-05-23 04:12:34
Gravatar image Dude, it doesnt move on IE6.. :(
Read more...
Name:
Email:
  Gravatar enabled.
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Security Image
Please input the anti-spam code that you can read in the image.
Unsubscribe from e-mail notifications.
 
< Prev   Next >
Subscribe
Navigation
Search
Search:
          
Sponsors
   



Blogrush