Placed in: Home viagra australia
viagra online
viagra sale
cialis online
cialis australia
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:
Digg!Reddit!Del.icio.us!Facebook!StumbleUpon!
 
< Prev   Next >
Subscribe

Subscribe to Marcofolio