Placed in: 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:
Digg!Reddit!Del.icio.us!Facebook!StumbleUpon!
Comments
Add NewSearchRSS
Ape   2007-12-24 23:20:29
Gravatar image Hé EB, IE7 is giving me bupkiss here. Care to explain?
Marco - re:   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   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   2007-12-31 12:16:58
Gravatar image Works like a charm now. I'll see you in a few weeks
rdiz - Better fix   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   2008-05-23 04:12:34
Gravatar image Dude, it doesnt move on IE6.. :(
vaQ - div jumps out in ie7   2008-08-18 13:06:51
Gravatar image 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
rw - cld u add an open close effect?   2009-01-27 16:43:23
Gravatar image this looks nice and neat!

would u know how to make it appear as a tab at first and slide out when clicked?

thanks!
Binh Nguyen - Too heavy   2009-05-13 19:13:30
Gravatar image 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
Diane - Webmaster, website design   2012-07-25 15:49:11
Gravatar image Why are you worried about IE 7 who uses it anymore? :whistle:
Binh Nguyen - Fixed style   2009-05-13 19:35:39
Gravatar image 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
Jono   2009-06-09 12:37:28
Gravatar image 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?
Me   2012-12-04 05:17:31
Gravatar image Try using z-index and set it to z-index:100 or so, so everything will be under it.
hombertho   2009-07-08 18:03:12
Gravatar image 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 :-)
havban - Thnx   2009-07-21 21:47:18
Gravatar image Thnx.. great and simple code.. success on first trial.. ^^
Swimmer - menu niet helemaal te zien   2009-08-27 15:23:08
Gravatar image 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

isaak - ie 7 won't load the proper width   2009-12-09 04:11:28
Gravatar image help ie7 won't load the proper width that I set it to- chrome google works fine how do i fix this problem?
Maurizio - Please Help Me   2010-05-27 00:11:44
Gravatar image Hello,
I tried to use your code to add a stick sidebar on my website but I have some problem with it... It move when I start to scrtol down and dimension of my website seems to change... :( :(
Mybe it is the table I ised to build up my site...
Kindly may you help me?
Please let me know.
Thanks,
Maurizio
nuagerebelle - On the left...   2010-06-14 14:16:37
Gravatar image I looked at a bit of the code, but to one who has not really ever written any js, it's intimidating. I was wondering how difficult it would be to have the sticky-sidebar on the left side of a webpage. If it isn't too much trouble, could you describe the procedure?
Anonymous   2010-10-03 04:45:41
Gravatar image hi
I'm new to coding, I installed the sidebar but I don't know how to add contents to it. Where should I put the code for the contents to appear
Russell   2011-06-15 21:46:01
Gravatar image
!!!! PUT YOUR CONTENT HERE !!!!!
TheGuyOnTheCouch   2013-02-04 20:42:01
Gravatar image i would assume, in your html code:

content goes here
TheGuyOnTheCouch - re:   2013-02-04 20:44:51
Gravatar image sorry, didnt know the page would react to my code like that.
put the things i put in ( )

() content goes here ()

if this shows the way i want it to, you take out the parenthesis, replace "content goes here" with what you want in the side bar and you should be set.
TheGuyOnTheCouch   2013-02-04 20:48:35
Gravatar image damn it! ok, im gonna try a different way to get this to you.

( shift + comma key )div class="sidebar"(shift + period key ) this is where your content goes (shift + comma key) /div (shift + period key)

Take out the parenthesis.
ed   2010-10-12 21:30:59
Gravatar image anyone know how I would go about adding this to Joomla 1.5.20? or if there is an extension I can download?
Help - Help!   2010-11-07 04:01:25
Gravatar image I am trying to move my advertisements from underneath the description box on my tumblr theme to this sticky bar.
Do I install both the CSS and javascript code or just one of them? Also where in the html coding do I place it?
And how do I place advertisements within the sticky bar?
<img src=ide:' />
Jasper   2010-11-30 16:10:29
Gravatar image Hey Marco,

nice die tutorial!

Maar heb ff een vraagje..
Als ik de
boven de zet werken de andere .js niet meer.
Maar als ik deze boven de andere .js zet werkt de rest wel maar de sidebar niet.
Weet jij daar misschien een oplossing voor?

grts Jasper
Jack - Error   2011-01-11 08:37:31
Gravatar image Hello,

I love this code it works great on your implementation.

However, I can't seem to implement it correctly. It doesn't work.

I'm running Google Chrome and I can view yours.

I believe I've followed all the steps correctly.

Any ideas would help thanks.

Also, for what it's worth, I changed the 221 to 491px and I put the CSS in my own template.
angela - helpppppp me :(   2011-04-12 06:28:33
Gravatar image Hey there, I'm using blogger. I was wondering how do I incorporate this with my blogger tepmlate. I have no independent host etc. etc. :( Please please help me out. I really want a static/sticky side bar for my photo blog in the making.

Thanks a lot,

Angela :)
sleep better birth control pil - sleep better birth control pills   2011-06-14 06:44:39
Gravatar image You guys are really wonderful who search and bring such a wonderful info, I am glad to see this time also a useful stuff that had inspired me. Thanks a lot do keep giving us genuine stuff
drug store place - drug store place   2011-06-14 06:45:50
Gravatar image I enjoy reading the post and have become a great fan of yours. Keep up with the good job and please provide us with great blogs. I really appreciate the research you people take for the posts.
overweight persons - overweight persons   2011-06-14 06:46:39
Gravatar image It was perfect collection of such useful information. This was a helpful post foe me. Thanks for sharing such nice information. Thanks a lot!
anti smoking pills journal - anti smoking pills journal   2011-06-14 06:47:13
Gravatar image I was a great experience to read your post. I found your site from Google and thank a lot for this nice and wonderful information. The information posted was useful and interesting.
hair loss user online reviews - hair loss user online reviews   2011-06-14 06:47:47
Gravatar image Thanks a lot for such a wonderful post, the stuff posted were really interesting and useful. The quality of the content was good and clear. Thanks for the post
diet side effects journal - diet side effects journal   2011-06-14 06:48:20
Gravatar image I appreciate the ideas posted on your site; they were very informative and innovative. It was worth visiting your site. Thanks a lot for such valuable information.
pharmacy online guide - pharmacy online guide   2011-06-14 06:51:48
Gravatar image It is amazing to such useful information at one place. I was looking for the same information from a long time, at last I found it. Thanks for such innovative and amazing information.
online retail pharmacy clinic - online retail pharmacy clinic   2011-06-14 06:52:30
Gravatar image I was very pleased to visit your site; I was definitely a wonderful site. The post was worth reading. I enjoyed each bit of your post. Thanks for such excellent post.
hair loss male pills reviews - hair loss male pills reviews   2011-06-14 06:53:49
Gravatar image I recently came across your blog and have been reading along. I have no words except to say that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
pharmacy info - pharmacy info   2011-06-14 06:54:32
Gravatar image I am extremely happy to write a comment on this blog. The information provided on the site was very informative and useful. Thanks a lot for such needy and innovative ideas and concepts.
anti smoking pills news - anti smoking pills news   2011-06-14 06:55:13
Gravatar image I really want to thank yahoo search engine who have sent me to this wonderful site. The articles posted on this site are great and amazing. I am glad that I have found this amazing site.
clinic pharmacy reviews - clinic pharmacy reviews   2011-06-14 06:56:05
Gravatar image I found this site extremely useful and informative. It is full of all useful stuff and I am glad that I have come across this site. I have made by job much easier, thanks for sharing with us.
super online pharmacy clinic - super online pharmacy clinic   2011-06-14 06:57:10
Gravatar image Wonderful post. I like the way it is written and presented. I have book marked the site for my future reference.
online anti smoking pills revi - online anti smoking pills reviews   2011-06-14 06:57:51
Gravatar image Nice blog and the article are simply superb. The article posted was very informative and useful. You people are doing a great job. Keep going.
over weight dosage - over weight dosage   2011-06-14 06:58:27
Gravatar image I had logged onto this site very recently and found it to be very useful and informative. Each and every concept was well presented. Thanks a lot for the information.
casino and gamlbing - Thanks   2011-07-22 06:20:42
Gravatar image Thanks Thanks
meg   2011-07-24 09:27:52
Gravatar image thank you
Matt Clover - multiple div usage   2011-09-27 15:33:53
Gravatar image Hi,

Absolutely great! Can I asl do you know how they created this: http://www.unionstationdenver.com/history/#/timeline
as they seem to use multiple instances of this effect. IIn my testing I changed the sidebar to a header which is situated 300px down the page to start and works exactly how I wanted.

Cheers

Matt
tatater56 - hello   2011-11-30 00:30:21
Gravatar image Hi :)
I love this sidebar, and used it on my little blog (i referenced you, of course!) My only question: Is there anyway to make this transparent/semi-transparent? The way that my site is setup... makes it tricky. I did find a way to eventually get around that, but... I would really prefer a semitransparent sidebar.
Besides that though awesome sidebar. I love this site, it's very... full of knowledge and stuff. :lol:
Colt - Add Content?   2011-12-17 05:43:32
Gravatar image Okay, I got adding the script, but where do you add content to go on the side bar? I really just want an image as the sidebar? help?????
saoirse - hey   2012-03-01 09:30:27
Gravatar image :cheer: :cheer: :cheer: :cheer:
Davis - Two sidebars - one right one left   2012-03-09 16:48:34
Gravatar image Can you make the code for having two of these sidebars?
Luis Nani - think   2012-06-04 02:10:11
Gravatar image i think it can.. i never try before
Wayne - Good Blog   2012-06-04 02:11:54
Gravatar image you have such a nice blog dude.. visit me back soon..
ciaed - hi   2012-06-04 02:07:11
Gravatar image thanks you very useful..
alex - confuse   2012-06-04 02:08:57
Gravatar image is this still working fine ?
Elda - Try   2012-06-04 02:13:02
Gravatar image Just try dude.. im sure it is still working fine..
ken - content   2012-07-06 13:32:23
Gravatar image please how can I add content to the side bar?
Anonymous - very nice siebar   2012-09-13 23:01:16
Gravatar image hello, thanks for this but i found a jquery code that will move your box or sidebar on scroll

Code:
$(function() {

var $sidebar = $("#col-right";),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 20;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});


thanks
Danilo - How to create a sticky sidebar or box for your web   2013-02-03 01:32:19
Gravatar image {
Bhuvnesh Rohilla - More about sidebars   2013-02-03 14:32:16
Gravatar image amazing tool!
read this to know more about sidebars!
Bhuvnesh Rohilla   2013-02-03 14:33:13
Gravatar image http://onlinemarketingpit.com/design-optimize-website-sidebar/
Keira - How to create a sticky sidebar or box for your web   2013-03-09 18:25:18
Gravatar image Later on, among the continued practice ending up will continue to be auxiliary accustomed burning the various chords.
Do not overlook this part of your learning. These hail every little
thing played getting rid of barely the sophisticated keys, so you ought to keep effective toward
crush extra listed below barely a limited area of time.
Julian - How to create a sticky sidebar or box for your web   2013-04-17 00:02:10
Gravatar image I will immediately clutch your rss feed as I can not to find your
email subscription link or e-newsletter service.
Do you've any? Kindly permit me recognize in order that I could subscribe. Thanks.
Niamh - How to create a sticky sidebar or box for your web   2013-04-17 09:25:02
Gravatar image Oh my goodness! Impressive article dude! Thanks, However
I am going through troubles with your RSS. I don't understand why I am unable to join it. Is there anyone else getting identical RSS problems? Anybody who knows the answer will you kindly respond? Thanx!!
Consuelo - How to create a sticky sidebar or box for your web   2013-05-02 17:12:17
Gravatar image KUM GRAB SUM LOW COST LIFE INSURANCE MOTHERFUCKER
Kasey - How to create a sticky sidebar or box for your web   2013-05-25 01:45:38
Gravatar image Workout 11 is a low-intensity cardio workout and is often used by
people incredibly important to have your body energized throughout the whole disc order for p90x.
The best way to compare is this - In can be distinct simply because it brings together complex carbs,
low fat proteins and also low-calorie fat.
The amino acids in protein can goal only to have someone in your life talk you out of it?
Augusta - How to create a sticky sidebar or box for your web   2013-05-29 12:32:58
Gravatar image For example, California law specifies a this process get
o'er money is transferred to borrower's write up with help of that they
can get all their desires to be fulfilled in veracious clock time.

[url=
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

Subscribe to Marcofolio