¿Cómo creo un Gmail como la navegación por las cerraduras al presionar la parte superior de la ventana?

Remy Sharp en jQuery4Designers tiene más documentación. El explica que

Puedo ver que una vez que la barra de desplazamiento llega al punto donde la canasta está en la parte superior de la página, se le aplica una clase que le da una posición: fija, lo que explica por qué se queda quieto mientras sigo desplazándome hacia abajo .

… El truco realmente sucede aquí en el CSS y es capaz de alternar entre posicionamiento absoluto y posicionamiento fijo.

… Un truco que encontré fue que tenía que envolver el elemento que recibiría la posición: fijo en una envoltura con posición: absoluta para que la posición izquierda fuera nuevamente la envoltura en lugar del elemento del cuerpo. El efecto de no tener el envoltorio significaba que cuando cambiaba el elemento fijo, saltaba hacia la izquierda por la cantidad de relleno y margen establecido en el elemento del cuerpo.

http://jqueryfordesigners.com/fi…

Rápidamente he reunido un ejemplo de trabajo a continuación.

Eché un vistazo al ejemplo de gmail, y parece que usan un poco de javascript, así que seguí su ejemplo. Tenga en cuenta que esto probablemente podría hacerse en CSS puro, pero sospecho que tendrá problemas con el navegador cruzado bastante rápido.

Lo que he hecho a continuación en resumen:

Tres piezas a la página (en orden):
– Encabezado (que se desplaza)
– Bloquear (que contiene el contenido que desea bloquear en la parte superior)
– Cuerpo (texto debajo del encabezado y bloqueo que debe desplazarse “debajo” del bloqueo)

Inicialmente, los tres elementos se acaban de construir para una visualización normal.

Dos nombres de clase CSS están en espera sin usar :
– estilo: .bodyHasLock que simplemente aplica algo de relleno al cuerpo para evitar que el texto salte
– estilo: .doLock que fija la barra de bloqueo a la parte superior

Sin embargo, esos estilos no se aplican hasta que la página se desplaza por la altura del encabezado. Un poco de javascript observa el evento de desplazamiento, y si nos hemos desplazado por la altura del encabezado, esos estilos se aplican; de lo contrario, se eliminan.

Hay formas más elegantes de hacer esto (y he omitido algunos detalles de buenos hábitos tanto en HTML como en Javascript), pero este es un ejemplo de trabajo tan simple como podría reunir rápidamente. Esto funciona tanto en Firefox como en Safari en Mac; todos los demás no han sido probados.

  
 

	 
		  

		 


		 

	 
	 
		 
		 

bloquear esto en el encabezado

texto del cuerpo aquí. Me he desplazado: 0 px

más ...

más ...

más ...

más ...

más ...

No funciona Enviarme un enlace por correo electrónico a un sitio web donde funcione: gj70 (at) lycos.com