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。（内部高度：863 - 内部宽度：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 发现他需要使用 window.innerHeight 而不是文档的 scrollHeight 属性。

于 2012-10-13T09:55:24.537 回答