javascript - 淡入/淡出，向上/向下滑动方法重复自己/完成得太快

Question

我正在尝试制作一个半粘性导航栏，它根据用户滚动的方向显示/隐藏，但我会遇到多次跳跃或动画在中间停止或结束得太突然的问题，你有没有我该如何解决这个问题？

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

我会运行一个 is animated 来检查它是否正在激活

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

然后忽略新事件或终止当前动画

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

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