时间戳

首页 > 解决方案 > 淡入/淡出，上/下滑动方法重复/完成太快

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

问题描述

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

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>

标签： javascriptjquery

解决方案

我会运行一个 is animated 来检查它是否正在制作动画

如果一个元素正在被动画，我如何用 jQuery 找出？

然后要么忽略新事件，要么杀死当前动画

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

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

推荐阅读