1

ページを下にスクロールするとメニューが変わる固定トップ ナビゲーションを作成しようとしています。特定の y ポイントを過ぎてスクロールすると、ページを下にスクロールしてメニューがスクロールし、2 番目のメニューが表示されます。ここに大まかなバージョンを実装しました: http://jsfiddle.net/hSpLQ/

主な問題が 2 つあります

1) コンテンツがスムーズにスクロールしない。すばやくスクロールすると、コンテンツがスムーズに移動しないことに気付くでしょう。

2) これがこのタイプのアニメーション/効果を実装する最良の方法であるかどうかはわかりません。コードは大雑把ですが、これを達成するためのより良い/より最適な方法があるかどうか疑問に思っています.

ありがとう

ラフプロトタイプのコードは次のとおりです（JsFiddleリンクと同じ）

<html lang="en">
    <head>
        <style type="text/css">
            body{
                height: 2000px;
            }

            .container {
                position: fixed;
                top: 0px;
                left: 0px;
                width: 100%;
                background-color: #CCC;
                height: 80px;
                overflow: hidden;
            }

            .content1, .content2 {
                height: 40px;
                margin: 40px;
            }
        </style>

    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="content1">
                    lots of text
                </div>
                <div class="content2">
                    more text
                </div>
            </div>
        </div>
    </body>

    <script src="js/jquery.min.js"></script>

    <script type="text/javascript">
        $(window).scroll(function() {
            var scrollYpos = $(document).scrollTop();
            if (scrollYpos > 200 && scrollYpos < 300) {
                var y = 200-scrollYpos;
                $(".content").css({'position': 'relative', 'top': y});
            }
        });
    </script>

</html>
4

1 に答える 1

1

ユーザーの CPU、ブラウザ、ブラウザのバージョン、さらにはグラフィックス カードなどを制御できないため、できることはあまりありません。jQuery の代わりにバニラ JavaScript を使用してパフォーマンスを少し改善することもできますが、おそらくあまり役​​に立ちません (レンダリングが遅いか、スクリプト インタープリターが遅いかによって、何も変わらない可能性があります)。
たとえば、私のブラウザでは、あなたの例は非常にスムーズに動作します。
それは本当にあなたのクライアントがどのように見えるかによって異なります。それは単なるウェブです。あまり心配しないでください。

最後に気になった点が2つ。

  1. スクロールイベントを受信するたびに「位置：相対」を設定する必要はありません。スタイルシートで一度設定するだけです
  2. スクロールが速すぎると、メニューが変な位置で動かなくなる

上記の問題を修正するコードは次のとおりですが、スムーズネスの問題は修正されない場合があります。

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();

    var y;
    if (scrollYpos > 200 && scrollYpos < 300) {
        y = 200 - scrollYpos;
    } else if (scrollYpos > 300) {
        y = -100;
    } else {
        y = 0;
    }

    console.log(y);
    $(".content").css({'top': y});
});

スクロール間隔の間のギャップを少し滑らかにしたいだけなら、これを試してください：

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();

    var y;
    if (scrollYpos > 200 && scrollYpos < 300) {
        y = 200 - scrollYpos;
    } else if (scrollYpos > 300) {
        y = -100;
    } else {
        y = 0;
    }

    var position = parseInt($(".content").css('top'));
    if((scrollYpos < 300 && scrollYpos > 200)
    || (position   < 0   && position   > -100)) {
        $(".content").stop().animate({'top': y}, 50);
    }
});
于 2013-07-21T21:04:50.413 に答える