向上或向下滚动时显示/隐藏页脚

Question

我想要实现以下功能：

1. 当 .scrollTop() > 20 时，显示 div
2. 延迟后进行 fadeOut
3. 当悬浮在固定页脚上时停止 fadeOut

这是我的 jQuery 代码：

$(function () {
    var targets = $(".footer-nav");
    if ($(window).scrollTop() > 20) {
        $(this).addClass('show');
    }
    $(window).scroll(function () {
        var pos = $(window).scrollTop();
        if (pos > 10) {
            targets.stop(true, true).fadeIn("fast").delay(2000).fadeOut(2000);
        } else {
            targets.stop(true, true).fadeOut();
        }
    });
});

我遇到了点.3的问题。而且，当我快速移动滚轮时，粘性页脚会闪烁。有没有方法来优化/改进? 在这里查看Jsfiddle。谢谢。

- Labanino

---

我在想你是否尝试过被接受的答案 - 它实际上并不能防止页脚在悬停时淡出，这正是主要问题。此外，添加类是不必要的，因为淡化将设置 display: block 或 display: none 。而且，附加数据似乎非常迂回，只是为了设置简单的超时。滚动事件中没有开关，因此，即使已经应用了淡化，它仍会尝试在每个滚动事件上进行设置。接下来，如果你在切换点周围来回移动，它会创建动画积累。看起来很整洁，但实际上并不是很有用。 - Shikkediel

粘性页脚旨在放置链接。因此，当您向上或向下滚动时，粘性页脚会淡入，以便您单击任何链接，然后在几秒钟后淡出。使用您的解决方案，页脚仅显示一次，当您再次滚动时，它将不会出现。我尝试了jsfiddle中的全屏选项并选择了答案，但它没有正常工作，但在http://codepen.io/labanino/full/mexgmL/中可以正常工作。非常感谢。 - Labanino

没错，我的代码（我懒得在这里贴了）似乎也有一个缺陷，但是被接受的答案真的很糟糕。我并不报复心理，只是说出自己的看法。而且还可疑地被点赞了。 - Shikkediel

Answer 1

我想这正是你所需要的内容：

演示

JQuery

注意：本文中使用了html标签，请仅返回翻译后的文本。

$(window).scroll(function(event) {
    function footer()
    {
        var scroll = $(window).scrollTop(); 
        if(scroll>20)
        { 
            $(".footer-nav").fadeIn("slow").addClass("show");
        }
        else
        {
            $(".footer-nav").fadeOut("slow").removeClass("show");
        }

        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            if ($('.footer-nav').is(':hover')) {
                footer();
            }
            else
            {
                $(".footer-nav").fadeOut("slow");
            }
        }, 2000));
    }
    footer();
});

- divy3993

---

这看起来很有趣，但事实证明它在许多方面存在缺陷。很抱歉说这个。 - Shikkediel

它有哪些缺陷？ - divy3993

你可以查看我在问题下留下的评论。而且，回过头来就给我投反对票？非常幼稚。 - Shikkediel

是的，但我认为这被称为递归，它再次调用自己的函数。我想这不是缺陷，而是编程中的一种方法。如果我错了，请纠正我。 - divy3993

它在功能上存在很多缺陷，与方法论无关。 - Shikkediel

Answer 2

注册一个mouseover函数来停止淡入淡出动画，并快速淡入。此外，在该处理程序内，注册一个mouseout处理程序，将其淡出，然后注销自身。

$('.footer-nav').on('mouseover', function () {
    $(this).stop().fadeTo(100, 1);
    $(this).on('mouseout', function () {
        $(this).stop().fadeOut(2000);
        $(this).off('mouseout');
    });
});

以前的答案没有注册鼠标移出事件，导致光标离开时页脚不会淡出。

- Tony Hinkle