How do you create a html scrollable area, that just uses the main browser scrollbar

I was looking at an issue in JIRA (e.g. here, an issue in JIRA 4) and I noticed JIRA 4 has some interesting scrolling behaviour, where when scrolling down with the main browser scrollbar,the jira header scrolls up out of way, then the issue title stay开发者_如何学Pythons fixed at top, then the rest of the issue continues to scroll. So the issue title is always visible.

There isn't an extra vertical scrollbar. Its all scrolled via the main browser scrollbar. So its either css or javascript magic! Any idea how they do that?

Cheers,

Phil.

It changes dynamically the div #stalker which has position:absolute;top:76px;. When the user scroll, change the position to position:fixed;top:0 and keep it in a fixed place, giving you the ability to scroll the rest content.

Edit

I created an example of this behavoir, because I was curious and here the demo if you want to check it http://jsbin.com/igiji5/3

Atlassian published the source of the Javascript at http://docs.atlassian.com/aui/3.0/jquery.stalker.js.html

That is created using JavaScript.

I can see by using FireBug to inspect the div#stalker that it changes class and style attributes when you are scrolling.