Jquery 窗口滚动，如果语句和动画工作不正常

看看JSFIDLE

当您向下滚动一点时，导航栏应显示在左侧。这是应该的。当您滚动回最顶端时，问题就出现了。它应该立即隐藏，但它不会。有时它会在延迟几秒钟后隐藏起来，有时它什么也不做。当你按下“到顶部”按钮时，它也不会隐藏，它应该这样做

有什么想法吗

HTML JAVASCRIPT 这应该起作用：

$(function() {
    "use strict";
    function checkSize() {
        if ( $(window).width() > 560 ) {
            $(window).scroll(function() {
                if ( $(document).scrollTop() > 100 ) {
                    if ( $("nav#menu-float").css("opacity") === "0" ) {
                        $("nav#menu-float").animate({
                            opacity: 1,
                            top    : "45px"
                        }, 800);
                    }

                }
                else {
                    if ( $("nav#menu-float").css("opacity") === "1" ) {
                        $("nav#menu-float").animate({
                            opacity: 0,
                            top    : "0px"
                        }, 800);
                    }
                }
            });
        }
        else {
            $("nav#menu-float").hide();
        }
    }

    $(window).resize(checkSize);
    checkSize();

    $("div#toTop").click(function() {
        $("body,html").animate({
            scrollTop: 0
        }, 800);
    });
});

您必须检查动画是否已完成，否则将一次又一次地为元素设置动画

if（$（“导航菜单浮动”）.css（“不透明度”）=“0”）{

检查不透明度动画是否完成

---

每次启动滚动事件时，您都在排队等待大量动画，总时间又增加了800毫秒。您需要设置某种标志，以在显示菜单时停止启动滚动事件，并在滚动返回顶部时删除该标志，以允许菜单再次隐藏

下面只是添加了一个检查，查看菜单是否有“显示”类，并相应地打开和关闭该类：

function checkSize() {
    var floatMenu = $("nav#menu-float");

    if ($(window).width() > 560) {
            $(window).scroll(function() {
                if ($(document).scrollTop() > 100 && !floatMenu.hasClass('showing')) {
                    floatMenu.addClass('showing').animate({
                        opacity: 1,
                        top: "45px"
                    }, 800);
                }
                else if ($(document).scrollTop() < 100 && floatMenu.hasClass('showing')) {
                    floatMenu.removeClass('showing').animate({
                        opacity: 0,
                        top: "0px"
                    }, 800);
                }
            });
    }
    else {
        floatMenu .hide();
    }
}

函数checkSize（）{
var floatMenu=$（“导航菜单浮动”）；
如果（$（窗口）.width（）>560）{
$（窗口）。滚动（函数（）{
if（$（document.scrollTop（）>100&&！floatMenu.hasClass（'showing'））{
floatMenu.addClass（'显示'）.animate({
不透明度：1，
顶部：“45px”
}, 800);
}
else if（$（document.scrollTop（）<100&&floatMenu.hasClass（'showing'））{
floatMenu.removeClass（'显示'）.animate({
不透明度：0，
顶部：“0px”
}, 800);
}
});
}
否则{
floatMenu.hide（）；
}
}

---

那

使用strict

做什么？这似乎是最符合逻辑的答案。确定与自然数相比需要三个

=

吗？@BramVanroy

strict模式是ECMAScript 5中的一个新功能，允许您将程序或函数置于“strict”模式中操作上下文。此严格上下文阻止执行某些操作并引发更多异常。

@BramVanroy和关于

==

，我总是使用此上下文，因为我不希望进行

=

所做的类型转换。

1==“1”//true

但

1==“1”//false

我尝试实现此功能，但它的性能太差了。有什么想法吗？：没关系，我使用了一个变量来确保dom不必一直被搜索，现在可以正常工作了。再次感谢！我不喜欢添加太多类，所以我想我会使用sQVe的解决方案。不过，我还是用了+1！

// Only show side menu when x pixels from top and when window size allows it
function checkSize() {
    var floatMenu = $("nav#menu-float");

    if ($(window).width() > 560) {
            $(window).scroll(function() {
                if ($(document).scrollTop() > 100) {
                    floatMenu .animate({
                        opacity: 1,
                        top: "45px"
                    }, 800);
                }
                else {
                    floatMenu .animate({
                        opacity: 0,
                        top: "0px"
                    }, 800);
                }
            });
    }
    else {
        floatMenu .hide();
    }
}

checkSize();
$(window).resize(function() {
    checkSize();
});

// Back to top
$("div#toTop").click(function(e) {
    $("body,html").animate({
            scrollTop: 0
    }, 800);
});

$(function() {
    "use strict";
    function checkSize() {
        if ( $(window).width() > 560 ) {
            $(window).scroll(function() {
                if ( $(document).scrollTop() > 100 ) {
                    if ( $("nav#menu-float").css("opacity") === "0" ) {
                        $("nav#menu-float").animate({
                            opacity: 1,
                            top    : "45px"
                        }, 800);
                    }

                }
                else {
                    if ( $("nav#menu-float").css("opacity") === "1" ) {
                        $("nav#menu-float").animate({
                            opacity: 0,
                            top    : "0px"
                        }, 800);
                    }
                }
            });
        }
        else {
            $("nav#menu-float").hide();
        }
    }

    $(window).resize(checkSize);
    checkSize();

    $("div#toTop").click(function() {
        $("body,html").animate({
            scrollTop: 0
        }, 800);
    });
});

function checkSize() {
    var floatMenu = $("nav#menu-float");

    if ($(window).width() > 560) {
            $(window).scroll(function() {
                if ($(document).scrollTop() > 100 && !floatMenu.hasClass('showing')) {
                    floatMenu.addClass('showing').animate({
                        opacity: 1,
                        top: "45px"
                    }, 800);
                }
                else if ($(document).scrollTop() < 100 && floatMenu.hasClass('showing')) {
                    floatMenu.removeClass('showing').animate({
                        opacity: 0,
                        top: "0px"
                    }, 800);
                }
            });
    }
    else {
        floatMenu .hide();
    }
}