Question

I am working on a sticky nav for a website currently, and I am running into a few problems, when the nav becomes position:fixed it seems to jump and it looks “clunky”, here is a fiddle of what I am trying to do,

http://jsfiddle.net/DKtLR/

Ideally the outcome would be the user scrolls and the nav is not in a fixed position until it is scrolled out of the viewport it then becomes fixed and and slides back into view.

Answer 1

Since you only want it to become fixed when it is completely out of viewport, then slide in, just modify the top property and then animate it back into view. See this fiddle for a working example.

UPDATE

This updated fiddle should work better, as it only applies the behaviour if not already applied, and completely removes dynamic styles when returning to normal ‘static’ position.

Note there is still a flicker when scrolling back up – this is because the nav ‘jumps’ from its fixed position back to its static position. This can easily be resolved using a similar technique to the animation above.