¿Cómo se crea un área desplazable HTML, que solo utiliza la barra de desplazamiento del navegador principal

Question

Estaba viendo un problema en JIRA (e.g. here, an issue in JIRA 4) y noté que JIRA 4 tiene un comportamiento de desplazamiento interesante, cuando se desplaza hacia abajo con la barra de desplazamiento del navegador principal , el encabezado jira se desplaza hacia afuera, luego el título del problema permanece fijo en la parte superior, luego el resto del problema continúa desplazándose. Entonces, el título del problema siempre está visible.

No hay una barra de desplazamiento vertical adicional. Todo se desplaza a través de la barra de desplazamiento del navegador principal. ¡Así que es una magia css o javascript! ¿Alguna idea de cómo hacen eso?

Cheers,

Phil.

Answer 1

Cambia dinámicamente el div #stalker que tiene position:absolute;top:76px;. Cuando el usuario se desplace, cambie la posición a position:fixed;top:0 y manténgala en un lugar fijo, dándole la capacidad de desplazarse por el resto del contenido.

---

Edición

creé un ejemplo de esto behavoir, porque tenía curiosidad y aquí la demo si quieres comprobarlo http://jsbin.com/igiji5/3

Answer 2

Creado mediante JavaScript.

Puedo ver usando FireBug para inspeccionar el acosador div # que cambia los atributos de clase y estilo cuando está desplazándose.

Answer 3

Atlassian publicó la fuente del Javascript en http://docs.atlassian.com/aui/3.0/jquery.stalker.js.html