I feel awkward to explain such thing, but it's quite strange to explain such thing to a JavaScript developer.
As this is JavaScript, a client-side code, you have this code fully downloaded to the host running it by the time you run it. You don't need anything else.
With your Web browser, use "View Page Source" to see the source. Save it in some file, read the content of it. Find out which scripts are included (and also CSS and whatever else you might need), figure out URLs of these resources and download them, too.
Now, the problem itself looks very simple.
You can handle scrolling using jQuery
.scroll()
,
To animate showing of a hidden element, use
.show(duration)
, for example,
.show('slow')
.
Please see:
http://api.jquery.com/scroll/[
^],
http://api.jquery.com/show/[
^].
[EDIT]
You also need to know direction of scroll. For this purpose, you can compare scroll amount before and after scroll using
.scrollTop
, see
http://api.jquery.com/scrollTop/[
^]. You will also need
.hide('slow')
on scroll up.
Additionally, there is one more feature you need to implement, called "sticky footer".
Just find a solution here:
http://bit.ly/xdoURb[
^].
It should keep your toolbar at the bottom of the page no matter where you scroll it.
Actually, Martin has already done it all in his answer.
My main point here is this:
you can always copy scripts from the sample and learn how they work, please see above.
—SA