javascript - jQuery animate odd behavior IE/Safari -
i have code show , hide navbar @ top animation.
it's working fine chrome , firefox, not versions of ie (11, example) , safari: nav slides down automatically slides (hides) in loop.
i wonder if, solution in javascript, solved css.
it's wordpress site. html:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="navbar-header-container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> <?php $args = array('theme_location' => 'primary', 'container_class' => 'navbar-collapse collapse', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => '', 'menu_id' => 'main-menu', 'walker' => new upbootwp_walker_nav_menu()); wp_nav_menu($args); ?> </div><!-- .col-md-12 --> </div><!-- row --> </div><!-- container --> </nav>
and script:
$(function(){ var prevscroll = 0, curdir = 'down', prevdir = 'up'; $(window).scroll(function(){ if($(this).scrolltop() >= prevscroll){ curdir = 'down'; if(curdir != prevdir){ $('nav').stop(); $('nav').animate({ top: '-100px' }, 300); prevdir = curdir; } } else { curdir = 'up'; if(curdir != prevdir){ $('nav').stop(); $('nav').animate({ top: '0px' }, 300); prevdir = curdir; } } prevscroll = $(this).scrolltop(); }); })
Comments
Post a Comment