2

我正在尝试获得具有自动隐藏（或更好的自动显示）效果的菜单，模仿 osx 栏在鼠标靠近屏幕底部时隐藏和取消隐藏自身的方式。

就我而言，菜单位于顶部。它是一个 div，位于屏幕外（顶部：-270 像素）并在您向下滚动页面 200 像素后进入屏幕。这是 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");
        }
    });
});

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

有什么帮助吗？

4

3 回答 3

1

这是一个（更新的）使用包含 div 的方法有一个悬停目标（我添加了更多颜色以便更容易看到效果）（演示）

<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-07T17:26:20.400 回答
0

您可以尝试这样做（未经测试，可能您需要查看隐藏逻辑）：

$(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-07T17:27:11.680 回答
0

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

于 2013-05-07T17:40:54.743 回答