Question

I’m hitting a brick wall with an idea I have for a header because I don’t know what the ‘effect’ is called; even though I have seen it loads of times.

My idea is to have a hidden header, which will drop down when the user places their cursor at the top of the screen. Similar to the Windows 8 menu, which appears when you put your cursor in the corner of the screen.

If anyone could point me in the right direction I’d appreciate it.

Answer 1

I would do something like this: http://jsfiddle.net/V9Cfn/2/

$(window).on('mousemove', function (e) {
   if (e.pageY < 100) {
       $("#showtop").slideDown();
   }
   else {
       $("#showtop").slideUp();        
   }
});

Essentially if the mouse is close enough to the top, show the div in question that you have fixed to the top.