Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
rated 0 times [  4] [ 6]  / answers: 1 / hits: 37657  / 13 Years ago, thu, july 14, 2011, 12:00:00

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.

More From » html


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) { = 30px;
} else { = (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.)

[#91182] Wednesday, July 13, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 523
Total Questions: 111
Total Answers: 100

Location: Anguilla
Member since Sun, Jan 29, 2023
1 Year ago