首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >淡入/淡出,向上/向下滑动方法重复/完成得太快

淡入/淡出,向上/向下滑动方法重复/完成得太快
EN

Stack Overflow用户
提问于 2018-12-06 04:04:41
回答 2查看 40关注 0票数 2

我正在尝试做一个半粘性的导航栏,根据用户滚动的方向显示/隐藏,但我是否遇到了多次跳转或动画在中间停止的问题,或者结束得太突然,你有什么建议吗?我该如何解决这个问题?

代码语言: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:

代码语言:javascript
复制
<!-- 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>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-12-06 04:40:33

我会运行一个is动画来检查它是否处于主动动画状态

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

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

您可以使用Jquery stop或finish来完成此操作。

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

票数 2
EN

Stack Overflow用户

发布于 2018-12-06 04:51:54

对于将来有这个问题的开发人员:我刚刚添加了一个检查动画是否还在运行:

代码语言:javascript
复制
if(tempPosition > basePosition && tempPosition > boundLine.height() && !$('#navStick').is(':animated')) $('#navStick').slideUp('slow');

else if(!$('#navStick').is(':animated'))    $('#navStick').slideDown('slow');
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53639937

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档