javascript - sigue - menu scroll

¿Cómo puedo obtener un menú de posición fija como el menú de filtrado de comentarios de slashdot?

Question

Slashdot tiene un pequeño widget que te permite ajustar tu umbral de comentarios para filtrar los comentarios modificados. Estará en un lugar si se desplaza hacia la parte superior de la página, y cuando se desplaza hacia abajo, en algún punto, donde su hogar original está a punto de desplazarse fuera de la página, cambiará a una posición fija y permanecerá en su pantalla . (Para ver un ejemplo, haga clic aquí ).

Mi pregunta es, ¿cómo puedo lograr el mismo efecto de tener un menú en un lugar cuando se desplaza hacia arriba, y cambiar a una posición fija mientras el usuario se desplaza hacia abajo? Sé que esto implicará una combinación de CSS y javascript. No necesariamente estoy buscando un ejemplo completo de código de trabajo, pero ¿qué pasos debe seguir mi código?

Answer 1

De acuerdo, lo descubrí. Lo publicaré aquí en caso de que ayude a alguien más. Esta solución usa un prototipo y una biblioteca interna que me da las funciones registerEvent, getElementX y getElementY, que hacen lo que usted piensa.

var MenuManager = Class.create({
initialize: function initialize(menuElt) {
this.menu = $(menuElt);
this.homePosn = { x: getElementX(this.menu), y: getElementY(this.menu) };
registerEvent(document, ''scroll'', this.handleScroll.bind(this));
this.handleScroll();
},
handleScroll: function handleScroll() {
this.scrollOffset = document.viewport.getScrollOffsets().top;
if (this.scrollOffset > this.homePosn.y) {
this.menu.style.position = ''fixed'';
this.menu.style.top = 0;
this.menu.style.left = this.homePosn.x;
} else {
this.menu.style.position = ''absolute'';
this.menu.style.top = null;
this.menu.style.left = null;
}
}
});

Simplemente llame al constructor con la identificación de su menú, y la clase lo tomará desde allí.

Answer 2

Gracias por el esfuerzo de compartir este código. Hice algunos pequeños cambios para que funcione con el lanzamiento actual de Prototype.

var TableHeaderManager = Class.create({
initialize: function initialize(headerElt) {
this.tableHeader = $(headerElt);
this.homePosn = { x: this.tableHeader.cumulativeOffset()[0], y: this.tableHeader.cumulativeOffset()[1] };
Event.observe(window, ''scroll'', this.handleScroll.bind(this));
this.handleScroll();
},
handleScroll: function handleScroll() {
this.scrollOffset = document.viewport.getScrollOffsets().top;
if (this.scrollOffset > this.homePosn.y) {
this.tableHeader.style.position = ''fixed'';
this.tableHeader.style.top = 0;
this.tableHeader.style.left = this.homePosn.x;
} else {
this.tableHeader.style.position = ''absolute'';
this.tableHeader.style.top = null;
this.tableHeader.style.left = null;
}
}
});

Answer 3

Para una demostración pero no basada en el código de pago anterior:

elementos fijos flotantes