Question

看看this jsFiddle。

当您向下滚动一点时，左侧会出现一个导航栏。这应该是正常的。当您向后滚动到顶部时会出现问题。它应该立即隐藏，但它不会。有时它会在经过几秒钟的延迟后隐藏，有时它什么都不做。当你按下“顶部”按钮时它也不会隐藏它。

有什么想法吗？

HTML

<nav id="menu-float">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <div id="toTop">to top</div>
</nav>

CSS

nav#menu-float {
    position: fixed;
    left: 50%;
    margin-left: -300px;
    width: 120px;
    background: white;
    padding: 0.2em 0.4em;
    padding-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 3px 0px rgba(0, 0, 0, 0.1);
    top: 0;
    opacity: 0;
}

nav#menu-float div#toTop {
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),   
color-stop(100%,#ededed));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%);
    background: linear-gradient(top,  #ffffff 0%,#ededed 100%);
    border: 1px #DDD solid;
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
    width: 50px;
    height: 20px;
    right: 5px;
    position: absolute;
    bottom: 5px;
    cursor: pointer;
    text-align: center;
}

JAVASCRIPT

// 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);
});

Answer 1

这应该有效：

$(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 ( $("nav#menu-float").css("opacity") === "0" ) {检查不透明度动画是否完成。

DEMO

Answer 2

每次滚动事件触发时，您都会排队大量的动画，并在整个时间内再添加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();
    }
}

SEE MY FORK HERE

窗口滚动，if语句和动画不能正常工作

HTML

CSS

JAVASCRIPT

2 个答案:

DEMO