This is my first post at the CSS Tricks forum, though I follow the blog and love this website's vibe... so hello to everyone and I look forward to participating in this community!

This is a question regarding the first site I've ever coded from scratch. I have familiarity with HTML and CSS, but I don't know much of anything about javascript. However I told my client I'd be able to do this since it seems so simple. Except I really don't even know where to begin, and I'm starting to fall behind schedule after finishing the rest of the site and putting off this damn <div> until the end! I probably shouldn't have sent her a mockup that included any javascript at all. But now it's not really feasible to change the design. So I hope a kind and generous soul can help me out.

Here's what I'm trying to do:

This is how the page looks when you go to the site. Notice the blue bar along the top.

http://i38.tinypic.com/hv18ut.jpg

I want the for the bar to stay locked at the top when someone scrolls, like this:

http://i34.tinypic.com/11ijnn8.jpg

Finally, when someone clicks the bar, I want it do slide down to reveal the content, like this:

http://i38.tinypic.com/rcsxgl.jpg

Shouldn't be too hard, right?

I really hope this doesn't come off as me asking others to do my work for me... I just need someone to point me in the right direction—perhaps there are plugins people know of that could accomplish this easily? I prefer to use jQuery but if this is more easily done with another framework that's fine too.

Thanks so much in advance. Again I hope it's not too audacious or brazen of me to make this kind of post immediately upon joining the boards.