CODEWITHSUNDEEP
javascripthtmlcsstemplates
TIMEX
TIMEX

Reputation: 272094

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

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.

Upvotes: 10

Views: 39086

Answers (4)

Steffen Cleveland
Steffen Cleveland

Reputation: 101

This solution is a lot simpler and might work just as good for some. Position: Fixed or Position: Sticky could do the job.

   <div class="col" style="position:fixed; top: 250px; left: 50%">

       <p>this box follows me while scrolling down</p>

    </div>

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074979

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

Upvotes: 14

Pezhvak IMV
Pezhvak IMV

Reputation:

As you can see other people provided ready scripts, but if you want to make one your self (waste of time) [or you may want to learn].. here is a good point to start:

var hscroll = (document.all ? document.scrollLeft : window.pageXOffset);
var vscroll = (document.all ? document.scrollTop : window.pageYOffset);

Upvotes: 0

red
red

Reputation: 2050

http://jsfiddle.net/25rgq/

This is an old implementation of your desired functionality, which I've used. It's one of the first scripts I wrote, so JS & jQuery knowing people will most likely vomit. I wrote it mainly due all the examples I found online were centered on moving the DIV rather than setting it to fixed, and incrementally adding to the top-margin of the box resulted in really choppy movement.

Basicly it changes to fixed as the specified element is a custom set margin from the top of the browser window, and stops moving down once it hits a custom offset before our footer (we wanted to constrain the followbox to not move past our sidebar space).

Hope it is of any use, and if a plugin to handle this nowadays exists, you would probably be better of using it.

Upvotes: -1

Related Questions