How do I make a div follow me as I scroll down the page?

Question

The user enters the site.

At this point, the div is in the middle of the page.

As he scrolls down the page, the div first begins to move upward, but once it hits the top, it stays there.

As he scrolls further down the page, the div stays near the top, always visible to the user.

As he scrolls up the page all the way to the top, the div once again stays back in position where it was originally.

Solution

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.)

Comments

[red]

Except for the fact that an expert implementation, perhaps released as a plugin would be both more optimized and less error prone, and easier to hook up into different types of web sites :)

[Anderson Green]

Is there a way to make the box stop following the scroll at a certain point?

[T.J. Crowder]

@AndersonGreen: Sure, just limit the value of scroll in the onscroll handler.

[Anderson Green]

I tried to make it stop scrolling at 900 pixels, and it seems to work when I add this code to the onscroll handler: if(scroll > 500){ scroll = 500; }