1

このページのような機能を作りたいです。B&O BeoPlay A3

下にスクロールすると、自動的に次のページまでスクロールします。

私はwindow.pageYOffsetで遊んでいます。私はこれまでのところこれを持っています：

window.onscroll = scroll;

        function scroll () {
            setTimeout(function() {
                if (window.pageYOffset < 100 && window.pageYOffset > 2) {
                    scrollLogin();
                }
                else if (window.pageYOffset > 100 && window.pageYOffset < 159 && window.pageYOffset != 124) {
                    scrollSky();
                }
                else if (window.pageYOffset > 159 && window.pageYOffset < 248) {
                    scrollCity();
                }
            },500);
        }
        function scrollLogin() {
            $('html,body').animate({
                scrollTop: $("#login").offset().top
            }, 500);
        }
        function scrollSky() {
            $('html,body').animate({
                scrollTop: $("#skyContainer").offset().top
            }, 500);
        }
        function scrollCity() {
            $('html,body').animate({
                scrollTop: $("#city").offset().top
            }, 500);
        }

問題は、この方法がまったくシームレスに機能しないことです。もう一度スクロールするまで 500 ミリ秒待たなければなりません。また、これも固定の画面解像度でのみ機能する場合。この機能をアーカイブするより良い方法を知っていますか? それはまた、異なる解像度のモニターで動作するようにパーセンテージ測定を可能にしますか?

私の試みへのリンク。

したがって、ビューポートが固執する 3 つの状態が必要です: 上 (ログイン バー)、中 (空のアニメーション)、下 (検索バー)。

どうもありがとうございました！

編集：

テイク 2:

アニメーションが終了したかどうかを示す変数を作成しました。アニメーションがオンになっている間は単に値が「1」であり、これによりあらゆる種類の混乱が防止されます。

そのため、スクリプトはかなりうまく機能しています。唯一の問題は、正確に私の innerHeight と innerWidth でのみ機能することです。(innerHeight: 863 - innerWidth: 1440)。

window.pageYOffset をパーセンテージで作成する方法はありますか? そして、これはこの効果をアーカイブする最良の方法ですか?

ありがとう、よい一日を。

これは私の新しいコードです:

window.onscroll = scroll;

        var animationIsOn = 0;

        function scroll () {
            if (animationIsOn == 0) {
                var pageY = window.pageYOffset;
                if (pageY < 119 && pageY > 69) {
                    scrollLogin();
                }
                else if (pageY > 5 && pageY < 69 || pageY > 179 && pageY < 254) {
                    scrollSky();
                }
                else if (pageY > 129 && pageY < 179) {
                    scrollCity();
                }
            }
        }
        function scrollLogin() {
            animationIsOn = 1;
            $('html,body').animate({
                scrollTop: $("#login").offset().top
            }, 500, function() {
                animationIsOn = 0;
            });
        }
        function scrollSky() {
            animationIsOn = 1;
            $('html,body').animate({
                scrollTop: $("#skyContainer").offset().top
            }, 500, function() {
                animationIsOn = 0;
            });
        }
        function scrollCity() {
            animationIsOn = 1;
            $('html,body').animate({
                scrollTop: $("#city").offset().top-600
            }, 500, function() {
                animationIsOn = 0;
            });
        }
4

1 に答える 1

0

pageYOffset をパーセンテージで取得するには、pageYOffset を document.documentElement.scrollHeight で割り、100 を掛けます。

編集: Ckrill は、ドキュメントの scrollHeight プロパティではなく、window.innerHeight を使用する必要があることを発見しました。

于 2012-10-13T09:55:24.537 に答える