如何创建一个可滚动的 HTML 区域，只使用主浏览器滚动条？

Question

我在JIRA（例如这里，在JIRA 4中的一个问题）上查看了一个问题，并注意到JIRA 4具有一些有趣的滚动行为，当使用主浏览器滚动条向下滚动时，jira标题向上滚动，然后问题标题保持固定在顶部，然后其余问题继续滚动。因此，问题标题始终可见。

没有额外的垂直滚动条。所有内容都通过主浏览器滚动条滚动。因此，这可能是CSS或JavaScript魔法！您知道他们是如何做到的吗？

谢谢，

菲尔。

- Phil

Answer 1

它会动态更改具有position:absolute;top:76px;的

#stalker

。当用户滚动时，将位置更改为position:fixed;top:0并将其固定在一个位置，使您能够滚动其余内容。

---

编辑

我创建了一个示例演示此行为，因为我很好奇，如果您想要检查它，请访问http://jsbin.com/igiji5/3

- Sotiris

---

感谢Sotris提供的回答和演示。 - Phil

Answer 2

Atlassian发布了Javascript源码，位于http://docs.atlassian.com/aui/3.0/jquery.stalker.js.html

- mrhaki

Answer 3

这是使用JavaScript创建的。

我可以通过使用FireBug来检查div#stalker，当您滚动时，它会更改类和样式属性。

- Pete