如何创建一个html可滚动区域,只使用主浏览器滚动条

时间:2011-02-07 14:05:44

标签: javascript html css scroll

我正在查看JIRA(e.g. here, an issue in JIRA 4)中的一个问题,我注意到JIRA 4有一些有趣的滚动行为,当使用主浏览器滚动条向下滚动时,jira标题会向上滚动,然后是问题标题保持固定在顶部,然后问题的其余部分继续滚动。因此,问题标题始终可见。

没有额外的垂直滚动条。它全部通过主浏览器滚动条滚动。所以它的css或javascript魔术!知道他们是怎么做到的吗?

干杯,

菲尔。

3 个答案:

答案 0 :(得分:5)

它会动态更改#stalker的div position:absolute;top:76px;。当用户滚动时,将位置更改为position:fixed;top:0并将其保存在固定位置,这样您就可以滚动其余内容。


修改

我创建了这个行为的一个例子,因为我很好奇,如果要检查它,请在这里演示http://jsbin.com/igiji5/3

答案 1 :(得分:4)

Atlassian在http://docs.atlassian.com/aui/3.0/jquery.stalker.js.html

发布了Javascript的来源

答案 2 :(得分:0)

这是使用JavaScript创建的。

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