How to create a html scrollable area that just uses the main browser scrollbar

Question

I examined the problem in JIRA ( for example, here, the problem in JIRA 4 ) and I noticed that JIRA 4 has an interesting scroll behavior when, when scrolling down with the main scroll bar of the browser, the jira header scrolls out of the way, then the problem header remains fixed at the top, then the rest of the problem continues to scroll. Thus, the title of the question is always visible.

No extra vertical scrollbar. Its all scrolling through the main scroll bar of the browser. So this is either css or javascript magic! Any idea how they do it?

Greetings

Phil.

Answer 1

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

---

Edit

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

Answer 2

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

Answer 3

This is created using JavaScript.

I can see, using FireBug to check the prelude div #, that it changes the class and style attributes when scrolling.