CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Labanino
Labanino

Reputation: 3960

Show/Hide footer when scrolling up or down

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.

Upvotes: 4

Views: 8533

Answers (2)

divy3993
divy3993

Reputation: 5810

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

Upvotes: 3

Tony Hinkle
Tony Hinkle

Reputation: 4742

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.

Upvotes: 1

Related Questions