1

この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;
}

ジャバスクリプト

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

2 に答える 2

2

これはうまくいくはずです：

$(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" ) {不透明度アニメーションが完了しているかどうかを確認します。

デモ

于 2012-08-24T14:01:14.730 に答える
1

スクロール イベントが発生するたびに大量のアニメーションをキューに入れているため、全体の時間がさらに 800 ミリ秒長くなります。メニューが表示されているときにスクロールイベントが発生しないように、何らかのフラグを設定する必要があります。また、スクロールが上部に戻ったときにフラグを削除して、メニューを再び非表示にできるようにする必要があります。

以下は、メニューに「showing」のクラスがあるかどうかを確認するチェックを追加し、それに応じてクラスのオンとオフを切り替えます。

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

ここで私のフォークを見てください

于 2012-08-24T14:06:54.097 に答える