Question

im试图根据用户滚动方向制作一个显示/隐藏的半粘性导航栏，但是我遇到了多次跳跃或动画在中间停止或突然结束的问题，您是否有建议我该如何解决？

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>

Answer 1

我将运行一个动画，以检查它是否正在动态制作动画

How do I find out with jQuery if an element is being animated?

然后忽略新事件或杀死当前动画

您可以为此使用Jquery stop或finish。

https://api.jquery.com/stop/

Answer 2

对于有此问题的未来开发人员：我只是添加了动画是否还在播放的检查：

if(tempPosition > basePosition && tempPosition > boundLine.height() && !$('#navStick').is(':animated')) $('#navStick').slideUp('slow');

else if(!$('#navStick').is(':animated'))    $('#navStick').slideDown('slow');

淡入/淡出，向上/向下滑动方法重复/完成过快

2 个答案: