jquery - 如何在鼠标接近页面顶部时显示一个div

Question

我正在尝试获得一个具有自动隐藏(或更好的自动显示)效果的菜单，模仿 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");
        }
    });
});

它工作得很好。但即使鼠标靠近屏幕顶部，我也想显示菜单(显然我还没有向下滚动)。

有什么帮助吗？

Answer 1

这是一个(更新的)方法，它使用包含 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>