Show/Hide footer when scrolling up or down

HTML

<div class="header">
    <img src="http://lorempixel.com/920/700/" alt="">
</div>
    
<div class="block"></div>
    
<div class="footer-nav">
    <p>This is my footer</p>
</div>

CSS

.block {
    height: 500px;
}
div.header {
    width: 100%;
    position: relative;
}
.footer-nav {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    display: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-align: center;
    cursor: pointer;
}
.show, .footer-nav:hover {
    display: block;
}

JavaScript

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