Question

让我尝试一下。我有一个搜索页面，可以像Google一样返回大量搜索结果。每个搜索结果都有一个触发器（通过使用onmouseover的图标）在弹出窗口中访问更多信息，弹出窗口弹出所有搜索结果的右侧，就像谷歌一样。这是我想要的弹出窗口：

无论我是在页面顶部查看第一个搜索结果，还是在页面底部查找最后一个搜索结果，我都希望弹出窗口与顶部边缘对齐屏幕，无论我在页面上垂直的位置（类似于固定）
但是，如果弹出窗口恰好包含更多数据，那么垂直屏幕高度允许，而不是弹出窗口在内部创建滚动条，我希望弹出窗口与页面上的其他内容一起向右滚动（类似绝对的）
问题在于，修复了超出可见浏览器窗口高度底部的数据，使其在没有内部滚动条的情况下无法访问。使用绝对，弹出窗口与页面上的所有其他内容一起滚动，这是很棒的和我想要的，但它总是出现在页面的最顶部，即使我在页面的底部，使其不可见用户，如果结果列表很长。

就像我试图在某种程度上结合这两种方法一样。总结一下：

当我通过onmouseover触发弹出窗口时，无论我在垂直方向的哪个位置，弹出窗口都应该自己贴在上边缘，但如果它的内容垂直高于屏幕允许的范围，我应该可以向下滚动整个页面看其余部分。我不必在弹出窗口中使用内部滚动条，如固定。

这可能吗？我该怎么做呢？谢谢！

Answer 1

你需要JavaScript。

首先，将弹出窗口div设置为position: absolute。这将像fixed一样，因为它可以轻松地通过left和top转到页面的任何位置，但它仍会随页面滚动。

在链接悬停时，让JS检测浏览器的滚动位置（通过jQuery中的window.offsetY或$(window).scrollTop()）。将此偏移量应用于弹出窗口：

$('.link').on('click', function () {
    $('.preview').css('top', $(window).scrollTop());
});

还要记住调整弹出窗口的其他CSS属性以满足您的需求 - 但是，大部分内容都可以在CSS中完成;你真正需要的唯一JS就是top属性。