我有这段代码用动画显示和隐藏顶部的导航栏。
它适用于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();
});
})