当鼠标移动并出现静止时出现的Navbar [英] Navbar that Appears When Mouse Moves and Disappears when Still

问题描述

我想让我的导航栏只在鼠标移动时出现，否则不会被看到。它是固定的。我尝试使用

$（html）.mousemove（function（）{

等...

但是，即使我完全不让鼠标完全移动鼠标，它似乎仍然会注册。有什么可能使这个有点棘手的是，我希望导航栏出现时鼠标移动到文档中的任何位置，而不仅仅是在导航栏区域中，只要鼠标没有移动，导航栏就不应该可见。

这个想法本质上是只有当用户移动鼠标时才会使navbar变为可见（表明有意改变某些内容），否则会导致内容分散注意力。

解决方案

您可以这样做：

HTML

 < div> navbar< / div> 
  

JAVASCRIPT

  $（div）。hide（）; 
 
 $（html ）.mousemove（function（event）{
 $（div）。sh ow（）; 
 
 myStopFunction（）; 
 myFunction（）; 
}）; 
 
 function myFunction（）{
 myVar = setTimeout（function（）{
 $（div）。hide（）; 
}，1000）; 
 
函数myStopFunction（）{
 if（typeof myVar！='undefined'）{
 clearTimeout（myVar）; 
} 
} 
  

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

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.

解决方案

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/

这篇关于当鼠标移动并出现静止时出现的Navbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！