I spent a good two hours figuring out how to do this and so I'm gleefully going to share it with you. Those of you with small monitors (or other strange habits) might have operating system dock (the thing at the bottom or top of the screen that you use to start programs, check the clock, and see what's running away with your CPU and network) set to "autohide."
If you've ever wanted to simulate that in your HTML, here's the bare-bones skeleton of a dock. Feel free to embellish it at your leisure.
My "dock" is just a pair of paragraphs contained within a DIV of set width and height. For my example, I chose 640 width, which assumes that most people have a screen bigger than that. The height of the DIV is 80 pixels-- 20 for the header, 60 for the body. The header will always be visible, the body only on mousover.
The CSS for the dock really controls most of it. By setting the style POSITION: FIXED, BOTTOM: 0, and HEIGHT: 20, I expose the header/handle, but not the body of the dock, and it gets nailed to the bottom of your viewport, independent of any scrolling.
So what's with the hide/fadeIn line? Ah, that's the trick. JQuery does not automatically provide visibility when using fadeIn/fadeOut; you have to do that yourself, so the hide() call gives the dock jQuery's notion of "hidden," then I unset the CSS hidden, and then use fadeIn(). I do this so the user does not see the dock as it's being drawn-- as it will initially be drawn off-center, and it make take the browser some time to get its act together and prepare to render the dock, especially if it's a particularly complex dock (the application I'm working on has a sliding display of draggable/droppable items in the dock, so yeah, that took a while to get set up). This gives the viewer a pleasant experience of seeing the dock fade in (quickly!) once it's completely ready to be rendered.
As always, the code has been de-fanged by Wordpress: