Show / hide footer while scrolling up or down

Question

This is what I am trying to do:

• Show divwhen.scrollTop() > 20
• fadeOut after delay
• Stop fadeOutwhen a :hoversticky footer

This is my 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();
        }
    });
});

I have problems with point .3 . Also, when I move the scroll wheel very quickly, the sticky footer flickers. Is there a way to optimize / improve . Jsfiddle here. Thanks.

Answer 1

I think this is exactly what you are looking for:

:

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

mouseover, . , mouseout, .

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

mouseout, , .