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

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!

Answer 2

You can try the following using the clientY property of event object to check the position of mouse relative to viewport.

$(document).on('mousemove',function(e){
    var hidden = ($("#header").css('visibility')!='visible');
    console.log(hidden);
    if(e.clientY <70 && hidden)
        $("#header").css('visibility','visible');
    else if(e.clientY >70 && !hidden)
        $("#header").css('visibility','hidden');
});

Not sure if this is the best way (tested in latest versions of major browsers but not the oldest ones)

Updated Fiddle