DIV float with page

How can I get a DIV to float with my page? Currently I have it setup like this: http://g2n.us/Dev/TheHabbos_6975/ I can do this by using the following CSS: Code:

.stayStill 开发者_JS百科{
  position: fixed;
  width: 300px;
}

But how can I get it so when the header scrolls away, the right DIV moves up and stays 10 pixels away from the top and scrolls with the page, unless the header is there?

---

You need JavaScript to do this.

Your site is already using it, so there should be no problem with using JavaScript to do this.

A couple of tutorials:

• http://jqueryfordesigners.com/fixed-floating-elements/
• http://css-tricks.com/scrollfollow-sidebar/

---

This answer uses jQuery

You can put this in your $.ready() function

var int_header_height = 10; //put pixel value height of header here
if ($(document).scrollTop() <= int_header_height) {
    $('div.stayStill').css('position','absolute').css('top','0px');
} else {
    $('div.stayStill').css('position','fixed').css('top','10px');
}

This also assumes that the div is in a position: relative element below the header. Otherwise you should change the .css('top','0px') to .css('top',int_header_height + 'px')