0

让我试着理解一下。我有一个搜索页面,它可以像 Google 一样返回大量搜索结果。这些搜索结果中的每一个都有一个触发器(通过使用 onmouseover 的图标)来访问所有搜索结果右侧弹出的弹出窗口中的更多信息,就像谷歌一样。这是我想要从弹出窗口中获得的内容:

  • 无论我是查看页面顶部的第一个搜索结果,还是页面底部的最后一个搜索结果,我都希望弹出窗口与屏幕的顶部边缘对齐,无论我在页面上的垂直位置(类似于固定)

  • 但是,如果弹出窗口恰好包含更多数据,那么垂直屏幕高度允许,而不是弹出窗口在内部创建滚动条,我希望弹出窗口与页面上的其他所有内容一起向右滚动(类似于绝对)

  • 问题是固定切断低于可见浏览器窗口高度底部的数据,使其在没有内部滚动条的情况下无法访问。使用 absolute 时,弹出窗口与页面上的所有其他内容一起滚动,这很棒,也是我想要的,但它总是出现在页面的最顶部,即使我在页面的底部,使其不可见用户如果结果列表很长。

就像我试图以某种方式结合这两种方法一样。所以总结一下:

  • 当我通过 onmouseover 触发弹出窗口时,无论我垂直在哪里,弹出窗口都应始终固定在顶部边缘,但如果其内容垂直高于屏幕允许的高度,我应该能够向下滚动整个页面以查看其余的。我不应该像固定的那样在弹出窗口中使用内部滚动条。

这可能吗?我应该怎么做?谢谢!

4

1 回答 1

0

您将需要 JavaScript。

首先,将弹出窗口设置divposition: absolute。这就像fixed它可以通过left和轻松到达页面上的任何位置top,但它仍会随页面滚动。

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

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

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

小提琴:http: //jsfiddle.net/GWvNx/

于 2013-04-05T22:59:52.737 回答