jquery - show hide using animate.css bounce -

this works

$(window).on('scroll', function() { scrollposition = $(this).scrolltop(); if (scrollposition > 50) {   $('.top-nav').show(); } else {   $('.top-nav').hide(); }}); 

this works once (what happens after bounce out? since cannot element bounce again)

$(window).on('scroll', function() { scrollposition = $(this).scrolltop(); if (scrollposition > 50) {     $('.top-nav').css('visibility', 'visible').addclass('animated bounceinleft'); } else {     $('.top-nav').addclass('animated bounceoutleft'); } }); 

your code executing follows:

1. scrollposition @ top
2. when scrollposition goes on 50 adding classes animated , bounceinleft .top-nav element
3. if scrollposition remains on 50 nothing happens
4. when scrollposition goes below 50, first time, not removing bounceinleft class instead adding bounceoutleft. in occurrence, when adding bounceoutleft work, however:
5. when scrollposition goes below or on 50, both classes bounceinleft , bounceoutleft assigned .top-nav element => nothing happens.

the above 1 possible scenario, bottom line still same, adding animation classes , not toggling them.

same applies visibility. well, almost...