¿Bloquear un div en la pantalla después de que se haya desplazado tanto?

Actualmente estoy tratando de encontrar una manera de bloquear mi encabezado en la pantalla después de que la mayor parte se haya desplazado hacia arriba.

Entonces, si, por ejemplo, mi encabezado tenía 150 píxeles de alto, ¿podría bloquear de todos modos los 15 píxeles inferiores en la parte superior de la pantalla después de que los 135 píxeles superiores se hayan desplazado hacia abajo mientras el usuario se desplaza hacia abajo en mi página? De modo que no importa lo larga que sea mi página, siempre estarán los 15 píxeles inferiores de mi encabezado en la parte superior.

También necesito revertir esto cuando el usuario retrocede, para que el encabezado pueda volver a su estado original.

He intentado un trabajo sucio en el que tener otro encabezado de 15 píxeles de alto con una posición "fija" en capas detrás de mi encabezado original, de modo que cuando el original de 150 píxeles completo desaparece de la pantalla, mi nuevo aparece por detrás. Esto funciona, pero si el usuario lo detecta en el punto medio, parece vergonzoso.

Tengo un conocimiento extremadamente limitado de JavaScript y temo que esa sea mi respuesta.

preguntado el 27 de agosto de 11 a las 16:08

1 Respuestas

Estoy algo confundido acerca de lo que quieres ... y por lo que estás diciendo ... creo que hiciste lo mismo que yo ... pero por alguna razón no te gustó ...

De todos modos ... si te entendí bien, esto debería funcionar.

http://jsfiddle.net/5pJuJ/

Esencialmente hay un elemento que se posiciona fixed que está detrás del encabezado y es fixed en la parte superior y, por lo tanto, se revela una vez que se desplaza hacia abajo.


Oh, cierto ... esto no funciona tan bien si hay un gradiente o algo así ... ¿Ese era el problema?

Hice esto para demostrar el problema que creo que estás teniendo. http://jsfiddle.net/5pJuJ/1/ (que creo que debería haber proporcionado ... grr ..)


Esto parece que hace lo que quieres bastante bien:

http://imakewebthings.github.com/jquery-waypoints/

http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

Respondido 28 ago 11, 19:08

Sí, mi encabezado es en realidad una imagen, con una sombra y transparencias y con texto. Entonces, si puedes imaginarlo medio desplazado fuera de la página con el encabezado duplicado subyacente saliendo de abajo, no es muy bonito. Espero lograr algo, en el que el div de un encabezado sea el que deje de desplazarse y se bloquee en su lugar, en lugar del método que describió (y que usé originalmente), ya que desafortunadamente se ve muy mal en esta situación. - Flickdraw

Mi js no es lo suficientemente fuerte como para decir nada al respecto. Aunque creo que podría ser un poco complicado de todos modos. - Joonas

¡Eso hace exactamente lo que estaba buscando! ¡Gracias por toda tu ayuda! - Flickdraw

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.