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 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