JQuery: 带有粘性导航栏的不透明度动画只工作一次

Question

我有一个使用此代码的粘性导航栏：

var stickyNavTop = $("#mynavbar").offset().top;
var winheight = $(window).height();
var relation = stickyNavTop / winheight;

function fixNavBar() {

    var stickyNav = function(){
        var winheight = $(window).height();
        var elempos = winheight * relation;
        var scrollTop = $(window).scrollTop();

        if (scrollTop > elempos) { 
            $("#mynavbar").addClass('sticky');
            $("#logo").animate({opacity: 1}) // <- first animation
        } else {
            $("#mynavbar").removeClass('sticky');
            $("#logo").animate({opacity: 0}) // <- second animation
        }

    };

    stickyNav();

    $(window).scroll(function() {
        stickyNav();
    })
}

fixNavBar();

css:

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
}

#logo {
    position: absolute;
    left: 0px;
    opacity: 0;
}

当我只添加第一个动画时它工作正常。当我添加第二个以在向上滚动时将不透明度重置为 0 时，它会在加载页面时立即执行。在这种情况下，徽标始终不可见。

我上传了一个 preview here（最小化 window，直到出现菜单图标；第二个动画被注释掉）

非常感谢... 一月

Answer 1

如果我没理解错的话，您想在顶部滚动位置位于第一个棕色块之后时显示小徽标，否则隐藏它。

每次滚动都会触发一个新的动画，jQuery正在排队所有动画。要在向上滚动时隐藏徽标，您必须停止所有以前未完成的动画。

    if (scrollTop > elempos) { 
        $("#mynavbar").addClass('sticky');
        $("#logo").animate({opacity: 1})
    } else {
        $("#mynavbar").removeClass('sticky');
        $("#logo").stop(true); // Stop all previous animations
        $("#logo").animate({opacity: 0})
    }

JQuery: 带有粘性导航栏的不透明度动画只工作一次

JQuery: Opacity animation with sticky navbar only works once

jquery

twitter-bootstrap

jquery-animate

sticky