What is best practice for designing a Persistent Navigation (or navigation that stays visible and fixed when the user scrolls)

Question

Looking for best practices when designing a persistent navigation like below: NFL (the scores in the banner)http://www.nfl.com/

Facebooks blue header http://www.facebook.com/

Creatticas header and left buttons http://creattica.com/

Answer 1

I haven't seen any formal write-ups on this convention, and I think "best practices" are a little dubious given the variety of UI layouts and aims, but having recently designed one of these I would offer a few pointers:

• Keep the navigation compact. Persistent nav takes up real estate, effectively permanently stealing that space from content. In our case, we very subtly compressed the header as it bumps the viewport and hide unnecessary elements. Your example at Creattica already has a fairly compact header, so this wasn't necessary
• Make transitions subtle. If you do change elements in the nav as you scroll down, try to be subtle about it - a well-done transition should be barely perceptible. TechCrunch has a very noisy transition that I find distracting - here it is at it's most awkward moment:

Note how the logo is a mess at this moment. They do have a very compact header nav once the clunky transition is over with.

• If relevant to you, make sure it degrades gracefully. In our case, we needed to support down to IE6, which doesn't have position: fixed CSS support and needed a javascript shim, which in turn proved to be too taxing on the rendering and caused flashing, so we just turned this feature off for browsers without that CSS attribute.