Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Fixed nav animate in/out on scroll

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #194150
    grimski
    Participant

    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!

    #194159
    Paulie_D
    Moderator

    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.

    #194176
    Paulie_D
    Moderator

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.