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＆＃34; #hashtag名称 + -info＆＃34;一次显示的类（例如.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);
    }   
}

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

1 个答案: