如何在鼠标靠近页面顶部时显示div

我试图获得带有自动隐藏（或更好的自动显示）效果的菜单，模仿osx栏隐藏和取消隐藏的方式鼠标靠近屏幕的底部。如何在鼠标靠近页面顶部时显示div

就我而言，菜单位于顶部。它是一个div，定位在屏幕上（顶部：-270px），并在您向下滚动页面达到200px时进入屏幕。这是jquery代码（$ j是为了与其他脚本兼容）：

$j(function($){ 
    $(window).scroll(function() { 
     var yPos = ($(window).scrollTop()); 
     if(yPos > 200) { // show sticky menu after screen has scrolled down 200px from the top  
         $('header').css("top","0").fadeIn(); 
     } else { 
         $('header').css("top","-270px"); 
     } 
    }); 
});

它完美地工作。但是，即使鼠标靠近屏幕的顶部，我也想显示菜单（显然我还没有向下滚动）。

任何帮助？

来源

2013-05-07 MASSIMO DI LEO

这里是一个很好的jsfiddle实施例 - http://jsfiddle.net/moojjoo/tneb97wk/ – Moojjoo 2016-11-03 18:03:11

下面是一个使用含有div有一个悬停目标（我已经添加了更多的色彩，使其更容易看到效果）的（更新）的方法（demo）

<div id='HoverSpace'> 
    <div id='HiddenMenu'> 
    <a href="#">Option 1</a> 
    <a href="#">Option 2</a> 
    <a href="#">Option 3</a> 
    <a href="#">Option 4</a> 
    </div> 
</div> 
<script> 
    var hoverMenu = $('#HiddenMenu'); 

    $('#HoverSpace').on('mousemove', function (event) { 
    if (35 - event.clientY < 0) { 
     hoverMenu.css({ 
      top: 35 - event.clientY 
     }); 
    } else { 
     hoverMenu.css({ 
      top: 0 
     }); 
    } 
    }).on('mouseout', function() { 
    hoverMenu.css({ 
     top: -35 
    }); 
    }); 
</script> 
<style> 
    #HiddenMenu { 
    background-color: #e00; 
    position: relative; 
    top: -35px; 
    } 
    #HoverSpace { 
    background-color: #aeaeae; 
    overflow: hidden; 
    height: 45px; 
    } 
</style>

来源

2013-05-07 17:26:20

不使用.hover我会使用.mouseover或.mouseenter – Cam 2013-05-07 17:37:40

[.hover（）]（HTTP：//api.jquery .com/hover /）简写为'$（selector）.mouseenter（handlerIn）.mouseleave（handlerOut）;' – 2013-05-07 18:04:21

@Cam，我已经扩展了代码让你在进入菜单时开始进入revel一旦你足够接近，就可以进入到位。 – 2013-05-07 18:23:17

你可以尝试做到这一点（没有测试过，也许你会需要查看隐藏的逻辑）：

$(document).mousemove(function(e){ 
    var vertical = e.pageY; 

    if(vertical <= 2 && !$('header').is(":visible")) {  
    $('header').css("top","0").fadeIn(); 
    } else { 
    $('header').css("top","-270px"); 
    } 
});

来源

2013-05-07 17:27:11 MISJHA

您需要使用.mousemove，鼠标移动可以跟踪你的鼠标移动，你实际上可以检测鼠标在屏幕上移动。当它向上移动时，您可以在Y轴的某个位置说出要开始显示或隐藏的内容。

来源

2013-05-07 17:40:54 Cam

如何在鼠标靠近页面顶部时显示div

回答

相关问题