*响应*位置：固定式面板？

Question

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

这让我觉得与更常见的“panel that stays in one spot”类似，但有一个额外的挑战：因为我的魔法面板比窗户高，所以将面板顶部固定在屏幕顶部（或事实上，屏幕上的任何地方意味着面板的下部区域永远不会显示。

可能还有其他方法可以达到目标，但我想象的是FWIW

1. 当页面滚动到顶部时，面板顶部位于其显示区域的顶部。
2. 当页面向下滚动一点时，面板与其保持同步，向下滚动像素 - 它的行为为position:static（默认值）。
3. 当物品向下滚动足够远以暴露面板底部时，它会以普通的“留在一个地方”的方式钉在那里，允许页面进一步向下滚动，同时保持面板底部可见且不动 - 它变为position:fixed。

我猜＃2也可以按比例滚动，如果可能的话，那么当窗口向下滚动时，比如说，它完全行程的30％，面板也会向下滚动30％的行程。

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

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

Answer 1

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

简单地说，让小组position:static开始。一旦窗口向下滚动windowScroll + windowHeight >= panelHeight，请将面板设置为position:fixed，top位于windowHeight - panelHeight，以便面板完全移出屏幕，除了等于窗口高度的数量。编辑：稍微误读了您的问题：不要使用windowHeight - panelHeight，使用当用户滚过时要显示的面板数量。

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

注意：获取视口高度可以是a little tricky。要确定滚动的距离，请尝试$(window).scrollTop()或等效。至于面板高度，请记住height，innerHeight和outerHeight之间的浏览器差异（或者使用一个提供与该值无关的浏览器的库，我相信jQuery会这样做。）

Answer 2

这是我对基于scrollTop();

的示例值的解释

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