Question

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

在我的情况下，菜单位于顶部。它是一个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");
        }
    });
});

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

任何帮助？

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>

Answer 2

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

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

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

Answer 3

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

当鼠标接近页面顶部时如何显示div

3 个答案: