I ♥ You

Floating Vertical Scroll Block

Xah Lee, 2006-01, 2010-03-10

Scroll the page down and you'll see a block that follows your window scrolling, so that it is always in the vertical center of the window.

Here we show how to have a block that moves to the center of page thru animation, so that whenever the user scrolled the page, the block slides into the desired position.

This script works in latest Windows versions of of FireFox, Chrome, Safari, Opera, as of 2010-03. It was also tested on Mac versions of Safari, iCab, FireFox, Opera as of 2006-01. It does not work in Microsoft Internet Explorer version 7 or 8. For IE, the javascript code need to be changed because IE supports a different model of getting scroll offset info.

How It Works

The moving block is just a html element, like this:

<div id="hh946" class="blk206">
I ♥ You
</div>

The “id” attribute is there for javascript to identify it easily. The “class” attribute is there for CSS.

Its CSS style is this:

div.blk206
{
 position:absolute;
 z-index:2;
 top:50%;
 left:1ex;
 background-color:pink;
 padding:1ex;
 width:7ex
}

The “position:absolute” makes its position with respect to the window. When the value of “position” attribute is “absolute”, the item's position is not related to other element's positions. It stands by itself. (and therefore, can float above, below, or overlap other elements) The “z-index” specifies the level of layer. The more positive, the more “top” or “above” other elements.

The trick to get it move while user scrolls, is by changing the CSS position of this element. In the javascript code, we do a loop of the script, at every 10 miliseconds. Each time, the script finds out how much the window has been scrolled, then change the position of the element. This will “jump” the block to the position we want. However, that does not give you the “following” effect. The “following” effect is done by making the jump distance proportional to the scroll offset. So, if the page has large scroll offset, we move its position by big leaps. But if the offset is small, we move the block by a tiny distance.

In summary, javascript changes the position of a html element. Each time moving the block closer to the desired position. Then, this function is called in a periodic loop.

Here's the javascript code:

// 2010-03-10
// change the position of a “div#hh946” element.

posX=2; // horizontal position from the left side of the page
posY=300; // verticle position from the top of the page
chasingFactor = .1; // the closing-in factor to desired position per update
updateFrequency=10; //milisecond

xMoveTo=0; yMoveTo=0; xdiff=0; ydiff=0;

function ff(){
 // compute the distance user has scrolled the window
 xdiff = xMoveTo - window.pageXOffset;;
 ydiff = yMoveTo - window.pageYOffset;
 if ( Math.abs(ydiff) > 1) {yMoveTo -= Math.round(ydiff*chasingFactor);}
 if ( Math.abs(xdiff) > 1) {xMoveTo -= Math.round(xdiff*chasingFactor);}

 g=document.getElementById('hh946');
 g.style.left = xMoveTo+posX;
 g.style.top  = yMoveTo+posY;

 setTimeout("ff()",updateFrequency);
}

window.onload = ff;

Once upon a time...

|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|

~FIN~

2005-08