根据滚动位置显示热点上方或下方的工具提示

Question

当你将鼠标悬停在图像地图上的热点上时，我已经做了一些简单的javascript来显示和隐藏一些div。

<script>
function showDiv(name) {
document.getElementById(name).style.display = "block";
}
function hideDiv(name) {
document.getElementById(name).style.display = "none";
}
</script>

在mouseover和mouseout事件中适当调用这些函数。

此时定位应用于css。但是我想扩展它以显示热点上方或下方的工具提示，具体取决于滚动位置。我的意思是，此时如果您将鼠标悬停在屏幕底部的热点上，则显示的div将显示在视图之外，访问者必须向下滚动才能看到它。在这种情况下，我希望它出现在热点之上。

任何建议，谢谢。

Answer 1

我曾经使用Prototype将一些东西放在一起（getDimensions（）/ viewport.getScrollOffsets（）是救生员！），但无法再找到代码了。我只记得找出什么偏移用于什么定位看起来容易，但需要花费很多时间才能实际工作。

您可能希望在现有解决方案的基础上进行构建（或者查看一个解决方案以了解它们如何定位）。 Nick Stakenburg的Prototip（警告并非完全免费，请查看许可页面）非常好且灵活，但所有框架都有数十个脚本。

对于与框架无关的解决方案，请检查DynamicDrive，即使代码有时会使您的脚趾甲卷曲，它们也能正常工作。