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!