This is what I'm trying to do:

1. Show div when .scrollTop() > 20
2. fadeOut after delay
3. Stop fadeOut when :hover the sticky 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'm having problems with point .3. Also, when I move the scroll wheel really fast the sticky footer flickers. Is there a way to optimize/improve. Jsfiddle here. Thanks.

This is what I'm trying to do:

1. Show div when .scrollTop() > 20
2. fadeOut after delay
3. Stop fadeOut when :hover the sticky 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'm having problems with point .3. Also, when I move the scroll wheel really fast the sticky footer flickers. Is there a way to optimize/improve. Jsfiddle here. Thanks.

• javascript
• jquery
• html
• css

• I was wondering if you've tried the accepted answer - it doesn't actually prevent the fadeOut on hover of the footer which was the main question. Also, adding the classes is unnecessary because fading will set either display: block or display: none anyway. And attaching data seems very circumventive to set a simple timeout. There is no switch on the scroll event so even if fading has been applied already, it will still try to set it on every scroll event. Next, if you go back and forth around the switching point it'll create animation build up. Looks neat but it's not very functional. – Shikkediel Commented Oct 27, 2015 at 2:32
• The sticky footer is intended to have links in it. So, when you scroll up or down the sticky footer fadeIn in case you want to click any of the links and after a couple of seconds fadeOut. With your solution the footer shows only once and when you scroll again it won't show up. I tried fullscreen in jsfiddle with the selected answer and is not working right but it does in codepen.io/labanino/full/mexgmL. Thank you very much. – Labanino Commented Oct 27, 2015 at 2:55
• True, my code (that I didn't bother to leave here) seemed to have a flaw too but the accepted answer really is a piece of crap. I'm not vengeful, just calling it like I see it. Suspiciously upvoted as well. – Shikkediel Commented Oct 27, 2015 at 12:13

2 Answers 2

I guess this is exactly what you looking for:

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

Register a mouseover function to stop the fading animation and fade it back in quickly. Also, within that handler, register a mouseout handler, which fades it out and then deregisters itself.

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

The previous answer does not register a mouseout event so that the footer fades out when the cursor leaves.