jQuery 高速滚动时滚动计算不准确

Question

我遇到了一些非常奇怪的事情。我的代码中出现错误的可能性很高，但我无法弄清楚为什么会发生这种情况。

首先，这是一个示例页面: http://designintellection.com/quotes/2011/jan/13/design-thinking-visual/

如果您注意到页面右侧的两个导航选项卡，当您向下滚动时，它们会缩小尺寸，然后在您向下滚动页面的其余部分时变为位置:固定。当您向上滚动时，它们会增长到原始大小并返回到非固定位置。 (如果您想知道为什么我要缩小它们，我最终将用图标替换文本。)

我在下面发布了实现此效果的代码(JS 和 CSS)。我知道它可以写得更好，但我想要辨别的主要问题是 Javascript 是否能够捕获每个特定的滚动位置。我这么说是因为如果你缓慢滚动，那么选项卡就会按照预期的方式运行，你可以随意上下移动。然而，如果你以正常到快速的速度滚动，那么大小、边距和定位就会崩溃，你会得到非常奇怪的行为。

在某种程度上，我觉得我正在服用疯狂的药丸，通常我会尝试寻找错误等，但对我来说这似乎很奇怪，当你缓慢滚动时它会起作用，而当你快速滚动时则不起作用。

jQuery:

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

        if (scroll > 80) {
            $("#the-portfolio-link").css({"width":"2px", "margin-top":"0"});
            $("#the-portfolio-link").addClass("page-link-portfolio-stay");
            $("#the-services-link").css({"margin-top":"108px"});
        }

        if ((scroll >= 22) && (scroll < 80)) {
            $("#the-portfolio-link").css({"width":"60px", "margin-top":"65px"});
            $("#the-portfolio-link").removeClass("page-link-portfolio-stay");

            var new_width = 60 + (22 - scroll);
            var existing_margin = 65;
            var new_margin_services = 65 - (60 - new_width);

            if (existing_margin < 65) {
                var new_margin = 65 - (67 - new_width);
                var margin_top = new_margin;
            }
            else {
                var margin_top = 65;
            }

            $("#the-portfolio-link").css({"width":new_width+"px", "margin-top":margin_top+"px"});
            $("#the-services-link").css({"margin-top":new_margin_services+"px"});
        }

        if ((scroll > 80) && (scroll <= 138)) {
            $("#the-services-link").css({"width":"60px", "margin-top":"108px"});
            $("#the-services-link").removeClass("page-link-services-stay");

            var new_services_width = 60 + (80 - scroll);
            var existing_services_margin = $("#the-services-link").css("margin-top").replace("px","");

            var margin_services_top = 108 + (60 - new_services_width);

            $("#the-services-link").css({"width":new_services_width+"px", "margin-top":margin_services_top+"px"});
        }

        if (scroll > 138) {
            $("#the-services-link").css({"width":"2px", "margin-top":"0"});
            $("#the-services-link").addClass("page-link-services-stay");
        }
    });
});

CSS(仅限相关代码):

.main-nav { position:absolute; left:1102px; top:55px; }
.main-nav-link { display:block; width:60px; height:22px; margin:65px 0 0 36px; }

.page-link-portfolio-stay { width:2px; margin-top:0; position:fixed; left:1102px; top:40px; overflow:hidden; }
.page-link-services-stay { width:2px; margin-top:0; position:fixed; left:1102px; top:83px; overflow:hidden; }

非常感谢任何想法等。

谢谢!-大卫

Answer 1

`我猜测您获取事件的速度比回调处理事件的速度快，这可能会导致对回调的多个调用同时运行，并且可能会互相冲突。

尝试像这样的简单守卫:

var busy = false;
$(window).scroll(function() {
    if(busy)
        return;
    busy = true;
    var scroll = $(window).scrollTop();

    //...

    if (scroll > 138) {
        $("#the-services-link").css({"width":"2px", "margin-top":"0"});
        $("#the-services-link").addClass("page-link-services-stay");
    }
    busy = false;
});

看看会发生什么。如果这解决了问题，那么至少您会知道问题出在哪里。当然，这个防护黑客并不是一个解决方案，它只是一个快速而简单的调试辅助工具，可以帮助您了解问题所在。真正的解决方案可能是使用 .queue and .dequeue 自己管理事件队列。 .

您还可以在回调外部创建所有 jQuery 对象，在回调内部对一堆 CSS 和类更改进行排队，然后在最后的一个 block 中应用所有更改。这不会解决您的问题，但会减少冲突和争论的数量。

顺便说一句，这段代码根本没有做任何有用的事情:

    if(existing_margin < 65) {
        var new_margin = 65 - (67 - new_width); 
        var margin_top = new_margin;  
    }
    else {
        var margin_top = 65;  
    }

您在分支内定义新的 new_margin 和 margin_top 变量，然后将其丢弃。