Navbar that Appears When Mouse Moves and Disappears when Still

问题

I would like to have my navigation bar only appear when the mouse is moved, and otherwise not be seen. It is fixed positioned. I tried using

    $( "html" ).mousemove(function() {

    etc...

But it seems to register even when I leave the mouse completely still that the mouse is moved. What may make this a little tricky is that I want the navbar to appear when the mouse is moved anywhere in the document, not just in the navbar area. Whenever the mouse is not moved, the navbar should not be visible.

The idea is essentially to only make the navbar visible when the user moves the mouse (indicating an intent to change something) because otherwise it would distract from the content.

回答1:

You could do something like that:

HTML

<div>navbar</div>

JAVASCRIPT

$("div").hide();

$("html").mousemove(function( event ) {
    $("div").show();

    myStopFunction();
    myFunction();
});

function myFunction() {
    myVar = setTimeout(function(){
        $("div").hide();
    }, 1000);
}
function myStopFunction() {
    if(typeof myVar != 'undefined'){
        clearTimeout(myVar);
    }
}

http://jsfiddle.net/guinatal/GRyEe/2/

回答2:

I would recommend handling mousemove with a function that does two things:

1. shows the navbar
2. sets a timeout with a function that hides the navbar after a short interval.

The second bit of code should first cancel any timeout that has already been set for the purpose of hiding the navbar.

The result will be a navbar that appears when the mouse is moved and disappears when the mouse has been idle for a while.

This is basically what @guinatal has just provided code for.

来源：https://stackoverflow.com/questions/23434004/navbar-that-appears-when-mouse-moves-and-disappears-when-still