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（最小化窗口，直到出现菜单图标;第二个动画已注释掉）

非常感谢... 扬

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：带有粘性导航栏的不透明度动画只能使用一次

1 个答案: