Hide fixed header on scroll down, show on scroll up and hover

Question

I have a fixed header that hides on scroll down and shows again on scroll up, this all works as intended. But I'd also like it to show up when you hover it's position, any ideas?

What I got so far:

$(function(){
var lastScrollTop = 0, delta = 5;
$(window).scroll(function(event){
   var st = $(this).scrollTop();

   if(Math.abs(lastScrollTop - st) <= delta)
      return;

   if (st > lastScrollTop){
       // downscroll code
       $("#header").css('visibility','hidden').hover ()
   } else {
      // upscroll code
      $("#header").css('visibility','visible');
   }
   lastScrollTop = st;
});
});

Fiddle: http://jsfiddle.net/r6kTs/

Answer 1

You may try change its top position instead:

if (st > lastScrollTop){
       // downscroll code
       $("#header").css({top:'-120px'})
       .hover(function(){$("#header").css({top: '0px'})})
   } else {
      // upscroll code
      $("#header").css({top:'0px'});
   }

And add this to #header css:

#header{
    /*YOUR CSS*/
    border-bottom: 2px solid #333 ;
    }

That way you can hover over the header's bottom border and show it.

Hope this works for you!