Fixed nav animate in/out on scroll

[grimski]

I’m working on a website for a mate and the effect we want to achieve is when the website is loaded the nav is displayed at the top of the browser (standard). On scrolling this navigation disappears off the screen (also standard) but then the nav slides/bounces back into view and remains fixed at the top of the browser.

This is what I’ve done so far, it’s pretty much there with the exception of the same animation in reverse on returning back to the top of the browser window:

http://www.moymadethis.com/templates/1-landing-page.html

My first question is, can I animate the navigation back off the screen in CSS so it bounces up and out of view? I’m sure I’ve read previously that you need to use Javascript to reset the animation?!

And secondly (lastly), I’ve achieved the effect in my example using 2 duplicate nav’s that are positioned on the screen when they’re needed using waypoints. Is it possible to do this with just the 1 nav? It seems a bit hacky using 2 and duplicate content/links can’t be good, right?

That said I know you can’t animated ‘position’, so to go from absolute to fixed and make it animate the way I want would take quite a bit of script presumably?

Thanks for reading and hope someone can lend me some advice on this!

[Paulie_D]

Not sure I’d be using animation as such.

Transitions maybe but a simple Codepen demo would be more useful than us trying to inspect a demo site with Developer Tools.

Did I see this on Stack Overflow too? It seems familiar.

If so a link to that would save us going over old ground.

[Paulie_D]

Well there is definitely going to be JS involved so the Jungle makes more sense to me.

[Author]

Posts