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

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事件，或者在每次计算后取消注册听众约50-500ms（取决于复杂度）。

注意：获取视口高度可以是a little tricky。为了弄清楚它已滚动多远，请尝试$(window).scrollTop()或同等效果。至于面板高度，请记住高度，innerHeight和outerHeight之间的浏览器差异（或者使用一个提供浏览器独立访问权限的库，我相信jQuery会这样做）。

Answer 2

这是我的解释与基于scrollTop();

评论这个演示例子的价值观和问任何问题http://jsfiddle.net/4ZWQU/10/。