0

如何在更高的页面中制作比屏幕高度更高的浮动面板，以使面板始终保持可见，但滚动到足以显示它的所有部分？

这让我觉得类似于更常见的“停留在一个位置的面板”，但有一个额外的挑战：因为我的魔法面板比窗口高，所以将面板的顶部固定在屏幕的顶部（或者，实际上,屏幕上的任何位置）表示面板的下部区域永远无法显示。

可能还有其他方法可以实现目标，但我的设想是 FWIW

  1. 当页面滚动到顶部时，面板的顶部位于其显示区域的顶部。
  2. 当页面向下滚动一点时，面板与它保持同步，逐像素向下滚动——它的行为position:static（默认）。
  3. 当内容向下滚动到足以露出面板底部时，它会以普通的“停留在一个位置”样式固定在那里，允许页面进一步向下滚动，同时保持面板底部可见且不移动——它变为position:fixed.

我猜#2 也可能是按比例滚动，如果可能的话，这样当窗口向下滚动时，比如说，它全部行程的 30%，面板也会向下滚动 30% 的行程。

具体来说，假设页面高度为 1000 行，面板高度为 200 行，窗口高度为 100 行。

  1. 在顶部，页面的第 1 行位于窗口的顶部，面板的第 1 行位于窗口的顶部。
  2. 向下滚动一点，每行的第 10 行位于顶部。
  3. 当滚动到位于顶部的页面的第 101 行时，将面板滚动到该位置会将其底部移动到窗口底部上方。因此，它会将其第 100 行留在顶部，并position:fixed在您进一步向下滚动时保持不变。
4

2 回答 2

0

这是我对基于你的榜样价值观的解释scrollTop();

查看此演示并提出任何问题http://jsfiddle.net/4ZWQU/10/。

于 2013-11-01T19:06:08.347 回答
0

您可以使用三个信息来执行此操作：窗口的高度、窗口向下滚动的距离以及面板的高度。

简而言之，让面板position:static开始。一旦窗口向下滚动到windowScroll + windowHeight >= panelHeight，将面板设置为position:fixedat top，windowHeight - panelHeight以便面板完全移出屏幕，除了等于窗口高度的量。编辑：误读了你的问题：不要使用windowHeight - panelHeight，使用当用户滚动过去时要显示的面板数量。

听窗口的（或文档的，可能需要测试）onscroll事件来告诉你什么时候重新计算面板的状态。为了防止 IE7 和 IE8 阻塞（它们发送太多onscroll事件），请在每次计算后使用超时来模拟监听onscroll事件或取消注册监听器约 50-500 毫秒（取决于复杂性）。

注意：获取视口高度可能有点棘手。要确定它滚动了多远，请尝试$(window).scrollTop()或等效项。至于面板高度，请记住高度、innerHeight 和 outerHeight 之间的浏览器差异（或使用提供独立于浏览器访问此值的库，我相信 jQuery 会这样做）。

于 2013-11-01T18:41:40.333 回答