How do I make a div follow me as I scroll down the page?
You can hook the scroll event on the window object. When processing the event, look at the vertical scroll position of the window/document (see this answer on SO for how to do that). Use absolute positioning for your div and update its top as coordinate as necessary.
FWIW, I would be very careful doing this. Usually when a user scrolls, it's because they want to look at different content than what's on the page. Personally, I hate boxes that follow me around on web pages. :-) But that doesn't mean there isn't a good reason for doing this on occasion.
Very basic example (live copy):
// Make sure this is in a script tag at the end of the body,
// just prior to the closing </body> tag.
function getScrollTop() {
if (typeof window.pageYOffset !== "undefined" ) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (typeof d.clientHeight !== "undefined") {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
window.onscroll = function() {
var box = document.getElementById("box");
var scroll = getScrollTop();
if (scroll <= 28) {
box.style.top = "30px";
} else {
box.style.top = (scroll + 2) + "px";
}
};#box {
/* Position absolutely, 30px down from the top */
position: absolute;
top: 30px;
/* In my case I'm centering it in the window; do what you like */
margin-left: -100px;
left: 50%;
width: 200px;
/* These are just for my example */
height: 1.25em;
border: 1px solid #bbb;
text-align: center;
}<div id='box'>I'm the box</div>
<div style="height: 1000px"></div>(In my case, I'm always keeping it 2 pixels below the top, but if you don't want that you can adjust the numbers accordingly.)