滚动太快时代码停止正常工作

Question

我有这个代码，来自该站点的user 非常好心地帮助我编写。它所做的是根据当前标签和图像位置隐藏和显示固定文本。如果向下滚动页面，您可以看到有效的代码here。

现在，问题是如果我快速向下滚动站点或使用左侧的菜单，有时文本在显示后不会隐藏。就像它卡住了，即使它不应该显示。另外，有时文字在显示之前就跳了，但我不知道那冷是否与这个问题有关。

jQuery 代码如下所示：

function projectInfo() {
    var distanceFromTop = $(window).scrollTop(),
        distanceFromBottom = $(window).scrollTop() + $(window).height();

    var id = window.location.hash;

    var divFromTop = $(id).offset().top,
        divFromBottom = divFromTop + $(id).height() + 150;

    if (distanceFromTop >= divFromTop && !(distanceFromBottom > divFromBottom)) {
        $(id.replace("#", ".") + "-info").fadeIn(150);
    } else {
        $(id.replace("#", ".") + "-info").fadeOut(150);
    }   
}

我尝试了几件事（实际上并没有奏效），但我想一个解决方案可能是只允许 1 个“#hashtag name + -info”类（例如.festival-rebranding-info) 一次显示。不过，我不确定该怎么做。

谁能给我任何指点或建议一个可能更好的解决方案？

非常感谢任何帮助！

谢谢。

Answer 1

当您使用 .fadeIn()/.fadeOut() 之类的函数以及将在同一位置隐藏/显示的多个元素时，您应该注意在需要显示其他元素时取消这些操作。你可以使用.stop() 方法来做到这一点。如果您需要让它在此时完全显示/隐藏 div，请使用语法.stop('fx', true);。试试这个，应该也会更快：

function projectInfo() {
    var distanceFromTop = $(window).scrollTop(),
        distanceFromBottom = $(window).scrollTop() + $(window).height();

    var id = window.location.hash;
    var idElement = $(id); // select the element once.
    var idWithClass = id.replace("#", ".") + "-info"; // do this once per call where possible
    $(idWithClass).stop(); // stops previous fadeIn()/fadeOut() calls.

    var divFromTop = idElement.offset().top,
        divFromBottom = divFromTop + idElement.height() + 150;

    if (distanceFromTop >= divFromTop && !(distanceFromBottom > divFromBottom)) {
        $(idWithClass).fadeIn(150);
    } else {
        $(idWithClass).fadeOut(150);
    }   
}