jQuery动画奇怪的行为IE / Safari

时间:2015-05-29 16:32:15

标签: javascript jquery css safari

我有这段代码用动画显示和隐藏顶部的导航栏。

它适用于Chrome和Firefox,但不适用于某些版本的IE(例如11)和Safari:导航向下滑动但会自动向上滑动(隐藏)循环。

我想知道是否,以及javascript中的解决方案,这可以用css解决。

这是一个WordPress网站。这是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>

这是剧本:

$(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();
});
})

0 个答案:

没有答案