我正在尝试做一个半粘性的导航栏,根据用户滚动的方向显示/隐藏,但我是否遇到了多次跳转或动画在中间停止的问题,或者结束得太突然,你有什么建议吗?我该如何解决这个问题?
let basePosition = 0;
let boundLine = $('.introImg');
$(window).scroll(function(event)
{
let tempPosition = $(this).scrollTop();
if(tempPosition > basePosition && tempPosition > boundLine.height())
{
$('#navStick').stop(true, true).animate({ opacity : 0 }, 400);
}
else
{
$('#navStick').stop(true, true).animate({ opacity : 100 }, 400);
}
basePosition = tempPosition;
});
html:
<!-- NAVIGATION BAR -->
<header>
<nav id = "navStick" class = "navbar fixed-top navbar-light bg-light navbar-expand-md myNav">
<a class = "navbar-brand" href = "#">
<img src = "img/logo.png" class = "brandImg"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="navSwitch">
<span class="navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "mainMenu">
<ul class = "nav navbar-nav ml-auto">
<li class = "nav-item">
<a class = "nav-link" href = "#"> Aktualności </a>
</li>
<li class = "nav-item dropdown">
<a id = "motorcyclesLink" class = "nav-link dropdown-toggle" data-toggle = "dropdown" role = "button" aria-expanded = "false" id = "dropdownMenuButton" aria-haspopup ="true"> Motocykle </a>
<div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
<a class = "dropdown-item" href = "#"> alfa </a>
<a class = "dropdown-item" href = "#"> beta </a>
</div>
</li>
<li class = "nav-item">
<a id = "teamsLink" class = "nav-link"> O nas </a>
</li>
<li class = "nav-item">
<a id = "galleryLink" class = "nav-link"> Galeria </a>
</li>
<li class = "nav-item">
<a id = "sponsorsLink" class = "nav-link" > Sponsorzy </a>
</li>
<li class = "nav-item">
<a id = "contactLink" class = "nav-link"> Kontakt </a>
</li>
</ul>
</div>
</nav>
</header>
发布于 2018-12-06 04:40:33
我会运行一个is动画来检查它是否处于主动动画状态
How do I find out with jQuery if an element is being animated?
然后忽略新事件或终止当前动画
您可以使用Jquery stop或finish来完成此操作。
发布于 2018-12-06 04:51:54
对于将来有这个问题的开发人员:我刚刚添加了一个检查动画是否还在运行:
if(tempPosition > basePosition && tempPosition > boundLine.height() && !$('#navStick').is(':animated')) $('#navStick').slideUp('slow');
else if(!$('#navStick').is(':animated')) $('#navStick').slideDown('slow');
https://stackoverflow.com/questions/53639937
复制相似问题