Estoy notando que muchos sitios están implementando recientemente nuevos tipos de efectos de desplazamiento. Aquí hay un ejemplo:
Cuando empiezas a desplazarte por primera vezla sección permanece en su lugar (¿índice z de 1?) mientras el contenido se desplaza sobre ella. También utiliza fragmentos y resalta dinámicamente su barra de navegación según el área en la que el usuario se haya desplazado.
He visto que algunos sitios utilizan técnicas similares. Uno (al que no puedo encontrar el enlace) cambia el fondo dinámicamente.
¿Existe una técnica común utilizada para estos tipos de sitios?
Respuestas
0 para la respuesta № 1Las dos primeras secciones están usando position:fixed.
Esta arreglos los elementos a una posición en la página. No se mueven, incluso con el desplazamiento.
La sección de desplazamiento utiliza position:absolute con un alto z-index.
Esto se desplaza bien y porque tiene una mayor z-index que la fixed position Elementos, se desplaza sobre ellos.
0 para la respuesta № 2
Hay varias formas de hacer esto, pero la más sencilla es simplemente hacer un div y usar el CSS.
"position:fixed;"
propiedad. Esto hará que el div se quede exactamente donde está, en relación con la ventana del navegador.
También es posible que desee establecer su índice z en un valor grande para que el div permanezca en la parte superior del resto de la página.
0 para la respuesta № 3
Para el menú y el encabezado, es una solución CSS simple usando position: fixed y z-index. Tanto el menú como el encabezado tienen position: fixed, mientras que el menú tiene una gran z-index Valor y el contenido principal tiene un poco más bajo:
#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }
En cuanto a la cosa del fragmento, se hace usando JS. W3Fools Tiene lo mismo, hecho usando jQuery. Quizás puedas descifrar la secuencia de comandos. Parece que se engancha al evento de desplazamiento del documento, verificando si la posición del elemento está por encima de la posición de la ventana gráfica, actuando en consecuencia.
0 para la respuesta № 4
Una forma es combinar CSS + JavaScript, digamos (jQuery)
CSS:
position:fixed para el panel superior.
Utilizar jQuery offset para detectar la posición del contenedor y después puede aplicar clases CSS para la "barra de navegación de elementos destacados".