Question

这就是我想要做的事情：

div

.scrollTop() > 20

fadeOut
当fadeOut粘性页脚

:hover

这是我的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 在这里。感谢。

Answer 1

我想这正是你要找的东西：

<强> Working : Demo

<强> JQuery的

$(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();
});

Answer 2

注册鼠标悬停功能以停止淡入淡出动画并快速淡化。此外，在该处理程序中，注册一个mouseout处理程序，将其淡出然后取消注册。

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

上一个答案没有注册mouseout事件，以便在光标离开时页脚淡出。

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

2 个答案: