Javascript 检测鼠标何时进入文档的特定区域（不是Div元素）

我试图弄清楚当鼠标进入文档底部时，他们的底部操作/菜单栏是如何向上滑动的。将鼠标移到不可见div上不会触发向上滑动效果（它通过transform translateY向上和向下滑动）

除此之外，菜单栏的高度只有44px，但它的IsVisible类在鼠标靠近它之前就被触发了——但是是通过什么呢？使用Inspect元素时，我看不到任何可能触发它的隐藏div

我搜索过无数种方法，例如“当鼠标进入文档的特定部分时显示元素”，但所有搜索结果都涉及鼠标进入或移动到div元素时，这不是我要寻找的解决方案

显然，您可以通过像我在这里所做的那样将“向上滑动”菜单放在隐藏容器中来解决此问题，然后获得所需的结果：

（函数（）{
var actionBar=document.querySelector（“.action bar”）；
var actionBarWrapper=document.querySelector（'.action-bar-detection'）；
函数showDiv（）{
actionBar.classList.add（'js-is-visible'）
}
函数hideDiv（）{
actionBar.classList.remove（'js-is-visible'）
}
actionBarWrapper.onmouseover=showDiv；
actionBarWrapper.onmouseout=hideDiv；
})();
*{
保证金：0；
填充：0；
框大小：边框框；
线高：1.5；
}
身体{
身高：100%；
}
.包装纸{
宽度：90%；
最大宽度：600px；
利润率：5%自动；
}
.动作条{
位置：绝对位置；
左：0；
底部：0；
边框：1px实心#252321；
背景：#fff；
填充：16px；
宽度：100%；
最小高度：50px；
不透明度：0；
转化：translateY（100%）；
过渡：全部5秒；
z指数：99；
}
.动作条检测{
高度：150像素；
宽度：100%；
不透明度：1；
位置：固定；
底部：0；
左：0；
z指数：1；
}
.js是可见的{
不透明度：1；
转化：translateY（0%）；
}

文件
当鼠标进入隐藏的动作栏元素时，向上滑动

但这只是因为动作条位于一个高度为150px的不可见检测层类（动作条检测）中

底部菜单
您可以通过收听文档上的
mousemove
事件来实现这一点，您需要投入精力来实现这一性能，因为它会频繁触发。监管此类事件最常见的方式是通过

一旦连接到mousemove事件，您将需要获取光标的Y坐标，并将其与窗口的高度进行比较，如果它在阈值范围内，则您可以显示面板，一旦它移出，您可以继续隐藏它

下面是一个显示基本实现的示例


//尽管您可以根据自己的意愿实现节流功能，但仍可以使用下划线
document.addEventListener（'mousemove'，u.throttle（mousemoveeventacon，200））；
功能mouseMoveEventAction（e）{
doPanelStuff（isInsideThreshold（e.clientY））；
}
功能doPanelStuff（isActive）{
var panelElement=document.querySelector（'.panel'）；
如果（isActive）{
panelElement.style.background='红色'；
}否则{
panelElement.style.removeProperty（'background'）；
}
}
函数isInsideThreshold（粗略）{
var阈值=200；
var clientHeight=document.documentElement.clientHeight；
返回粗略>（clientHeight-阈值）；
}
html，正文{
身高：100%；
}
.container、.content{
身高：100%；
宽度：100%；
}
.小组{
高度：50px；
位置：绝对位置；
底部：0；
宽度：100%；
背景：绿色；
}
获取视口高度，跟踪鼠标移动上的
onmousemove
，并将鼠标事件中的
clientY
与视口高度进行比较：


（函数（）{
var actionBar=document.querySelector（“.action bar”）；
var viewHeight=window.innerHeight-150；
功能切换DIV（e）{
如果（e.clientY>=视图高度）{
actionBar.classList.add（'js-is-visible'）；
}否则{
actionBar.classList.remove（'js-is-visible'）；
}
}
window.onmousemove=toggleDiv；
})();
*{
保证金：0；
填充：0；
框大小：边框框；
线高：1.5；
}
身体{
身高：100%；
}
.包装纸{
宽度：90%；
最大宽度：600px；
利润率：5%自动；
}
.动作条{
位置：绝对位置；
左：0；
底部：0；
边框：1px实心#252321；
背景：#fff；
填充：16px；
宽度：100%；
最小高度：50px；
不透明度：0；
转化：translateY（100%）；
过渡：全部5秒；
z指数：99；
}
.动作条检测{
高度：150像素；
宽度：100%；
不透明度：1；
位置：固定；
底部：0；
左：0；
z指数：1；
}
.js是可见的{
不透明度：1；
转化：translateY（0%）；
}

当鼠标位于屏幕底部150px范围内时，条向上滑动

当鼠标离开屏幕的该定义区域时，该条向下滑动

底部菜单
谢谢。我甚至没有想过节流问题！