1. Your avatar is a broken image icon.

2. The grey text in this write a comment box is so light grey, I have to squint my eyes to see what I’m reading. I take no responsibility for spelling mistakes.

3. Scratch that, I now see my typing actually appears to the left as well. That’s what you get when you are not a touch-typist and have to look at your keyboard…

4. The meny, I see you got what you wanted as for me, it turns in a search box once the footer is threatening to come in to view.

5. My paragraphing, using enters, doesn’t seem to be allowed. Do I need HTML?
Yes? Yes! nl2br would be nice here.
The pics etc. are so far down, I doubt we’d ever get to see it, which begs the question, why not move it up, or move it away?

Anyway, slick JS features and still very usable and readable.

1) Use jQuery ‘in view’ event plugin to detect when the footer is coming in to view.

jQuery('#footer-outer')
    .bind('inview', function (event, visible) {

2) When it’s in view – scroll up the menu block.

jQuery('.ribbon')
    .animate({ top: -400 });

3) When it’s back out of view scroll it back down.

jQuery('.ribbon')
    .animate({ top: 0 });

4) Extra merit – I added a little down arrow ↓ that appears when the menu is scrolled away, that will manually pull it down.

↓

and

function showMenu() {
    jQuery('.ribbon')
    .animate({ top: 0 });
    jQuery('.down-arrow')
    .animate({ top: -30 });
}

And there you have it.