Question

好的，我的问题很简单，但我不确定答案是否正确。我有一个固定在浏览器窗口底部的元素。当它不需要时我想隐藏它（设置高度为0px）。当用户的鼠标距离WINDOW（不是文档）的底部X单位时，我想再次显示div。我用google搜索了一下，当页面滚动到距离底部X个单位时，我能找到的是有关触发事件/预执行动作的信息。如果我可以指向正确的方向，我不需要如何做到这一点的确切代码。

问题（对于那些没有看到它的人）：
当鼠标指针位于浏览器窗口底部（而不是文档）的X单位内时，如何触发事件/执行函数？

一些注意事项：
这是针对greasemonkey / userscript的，所以答案不一定适用于IE 请不要建议使用图书馆。对于像这样小的东西，要求整个图书馆不是我愿意接受的答案。

解答： 建立Kir lvlev的答案如下（记得给他的回答一个upvote）：

// Standards compliant browsers
// if you have an IE solution, post it in the comments and I will add it.
window.addEventListener("mousemove",function(e) {
    // 20 is the number of pixels from the bottom inwhich the action should be preformed
    if ((this.innerHeight - 20) <= e.clientY) {
        //do stuff
    }
});

Answer 1

使用mousemove事件处理程序

$(window).mousemove(function(e)
{
      //mouse coordinates: e.pageX e.pageY
      //window height $(window).height()
});

非jquery的：

window.onmousemove = function(e) {
  //e.clientX e.clientY
  //window.innerHeight
}

Answer 2

看看我为你制作的这个jsfiddle：j sfiddle.net/Cnhvm /

在那里展示了一般的想法。你显然想要重新定位div，改变它的大小，并删除背景颜色。还要确保它的z-index值将其置于页面中任何其他内容之上。

这是标准的javascript：onmouseover="hoverOver();"

如果你想保留你的链接，你可以将它们放在div上的一些小块中，但需要更多的工作。

当指针距离浏览器窗口底部X个单位时触发鼠标事件

2 个答案: