Javascript 仅当用户滚动时才显示元素，无褪色怪癖

我想在页面右侧显示一个目录（对于一个长的web文档）作为一个固定元素

我很容易就得到了一个“hello world”，但我不知道如何防止元素在长时间滚动时淡入淡出

在小提琴上滚动足够多，你就会明白我的意思

js小提琴：

---

谢谢

您可以使用

clearTimeout

来防止ToC淡出

$(function () {
    var toc = $('.tableOfContents');
    var fadeTimer;

    toc.fadeOut();
    $(window).scroll(function () {
        toc.fadeIn();

        if (fadeTimer) {
            clearTimeout(fadeTimer);
        }

        fadeTimer = setTimeout(function () {
            fadeTimer = 0;
            toc.fadeOut();
        }, 10000);
    });
});

---

你的小提琴里没有JS。@Florent谢谢你指出这一点。刚刚修复。Scroll经常被调用，所以你不应该在每次调用时触发定时动画事件。在元素上设置一个标志/类，指示它是否再次被触发，并获取一个常规计时器事件来检查标志/类并淡出/重置标志/类。@oGeez我不希望TOC在不滚动时掩盖内容，这样他们可以轻松阅读页面上的所有内容。但当他们滚动时，我认为他们在寻找新内容，所以我希望TOC再次出现。一旦他们再次停止滚动，我猜他们正在阅读。我以前从未处理过超时问题，但这让我非常清楚如何处理超时问题。谢谢

$(function () {
    var toc = $('.tableOfContents');
    var fadeTimer;

    toc.fadeOut();
    $(window).scroll(function () {
        toc.fadeIn();

        if (fadeTimer) {
            clearTimeout(fadeTimer);
        }

        fadeTimer = setTimeout(function () {
            fadeTimer = 0;
            toc.fadeOut();
        }, 10000);
    });
});