How to set up a div so it follows the scroll when scrolling down a browser

[joelbrandman]

Hi,

Can someone help me recreate how to make this effect seen in this example?
http://kerrynehil.com/work/hot-studio/

I want to be able to set up a left side Div which stays at the top of the browser when scrolling down. I also want to re create the smooth follow seen on the above example website that i provided.

Any help will be very grateful!

Thank you.

[WolfShade]

Set the position of the div to "fixed" and then set the top and left to wherever you want.

[jkurrle]

As WolfShade noted, set the positioning to fixed and set specific coordinates for margin-top and margin-left. What he didn't mention is that this is done normally through CSS. Here is a floating div declaration in the CSS file of a project I'm working on:

.overlay div 
  {
  position: fixed;
  width:400px;
  height: 300px;
  top: 20%;
  left:50%;
  margin-left: -200px;
  margin-top: -150px;
  background-color: #fff;
  border:1px solid #000;
  padding:15px;
  text-align:center;
  }

While you can adjust CSS properties with javascript, if this div is going to be constantly on the page, you'd be better off declaring the div style in your CSS file.