"Floating" divs that scroll with page, with special conditions.
I am working on a project that I think could benefit from the above described feature. It would work a lot like the below examples, but would also behave a little differently. Hopefully it is coded a little more elegantly and semantically too.
I am aware of the CSS solution (
position: fixed), but that alone will not work for my needs. Maybe it will work in combination with some jQuery, but maybe not.
Take a look at my project here:
Don't mind the dummy content, the color schemes, the code, or the possible IE errors; I haven't gotten around to testing it in IE.
Anyway, notice the "navigation" div (About, Pictures, etc).
What I want to do with that is have it:
- Initially be in the position it is in when the page loads; but
- Move to the top of the viewing port when the viewer scrolls down to the top edge of
- Move back to it's natural position when the page is scrolled all the way back to the top.
Basically, I want to have
#navigation ALWAYS visible, at the top of the viewing port, except in the conditions described above.
I presume some
I know it's possible, because a number of years ago, I saw a script that did exactly this. The problem is, and the reason I am here, is that I can not for the life of me find it now.