Building A Great DHTML Chaser - DHTML Lab | 3

DHTML in GreatEqualizer.com, I:Building A Great DHTML Chaser

In this article, I discuss the implementation of the DHTML "chaser" panel that follows
you around as you scroll in the courses section of the website. To see what I mean, go to the
search page enter some general criteria, and click "search." See how the panel on the
right follows you around as you scroll...? In this article, I'll actually
show you two ways to get that effect, one that's easy and one that's more compatible on a variety
of platforms. We'll also delve into animation theory, some trigonometry, and
simple object oriented programming. So get out some graph paper and a pen
- this is where it gets fun .

To start, we should decide what makes a chaser good and what makes it terrible.
The most aggravating chasers I've seen were set up so that they were constantly
trying to stay exactly in step with the scroll position of the window - an
impossible task. Since they cannot possibly stay perfectly in step with the
browser window, what you get is an annoyingly jagged animation that makes
people leave in a hurry. The problem is caused by the fact that the maximum
frame rate that JavaScript can attain in a Web browser is relatively low.
This number varies with each operating system (see an excellent article pertaining
to this here on DHTML Lab), but on no operating
system is it fast enough to keep up with the average user's scrolling.

How do we get past this problem? We can't. However, we can turn the problem
into a feature by modifying the effect we try to achieve. We accept that the
chaser will always lag behind the scrolling action of the window, and instead
seek only to smooth and normalize that motion.

Here is a simple algorithm that gets the desired effect:

Record the current distance the window has scrolled added to the distance
you want it to maintain from the top of the window frame.

Record the difference between the number derived in step 1 and the
chaser's current position.

Calculate the amount to move the chaser, by multiplying the number
from step 2 by some constant positive fraction.

Decrement the chaser's current position by the number derived in step
3.

Go to step 1.

Before I show you the script, I need to explain one little-known JavaScript
trick I use frequently - object literals.