Cabecera fija con librería headroom.js

Con sesión iniciada

La cabecera se oculta cuando haces scroll hacia abajo y se muestra cuando el scroll es hacia arriba.

Vista previa #

Versión de escritorio

Versión móvil

Anatomía

Más información

¿Qué son los bloques?

Llamamos bloques a los contenedores definidos en las plantillas para facilitar la maquetación de las páginas. Cada bloque contiene las características necesarias para una correcta construcción, etiquetado y visualización de la página.

Más información en la sección Landmark Regions de W3C

Código de color

Bloques invisibles y secciones
Bloques de cabecera y pie de página
Bloques para títulos y textos
Bloques para acciones y navegación
Bloques para notificaciones y avisos

Características de cada bloque
Número del elemento en el diagrama y código de color	Nombre del bloque	Código Nunjucks	Descripción
1	Spinner de página	`{% block pageSpinnerBlock %}`	Oculto detrás del contenido
2	Cabecera	`{% block headerBlock %}`	Ocupa el ancho de la ventana para incluir el componente cabecera
3	Skip-link	`{% block headerSkipLinkBlock %}`	Ocupa el ancho de la ventana para incluir el componente de salto al contido principal necesario para accesibilidad
3	Subcabecera	`{% block subheaderBlock %}`	Espacio reservado bajo la cabecera, normalmente para contener elementos de navegación
4	Navegación de cabecera de edición	`{% block headerNavigationEditBlock %}`	Permite la navegación, si es necesaria, entre distintas páginas sin salir de la ventana de edición de contenido
5	Título de cabecera de edición	`{% block headerTitleEditBlock %}`	A la izquierda de la cabecera, muestra un título que indica que te encuentras editando el contenido
4	Navegación de subcabecera	`{% block subheaderNavigation %}`	Situado en la zona superior izquierda, para navegar a páginas anteriores
6	Acciones de cabecera de edición	`{% block headerActionsEditBlock %}`	A la derecha de la cabecera, permite realizar acciones sobre el contenido editado
7	Subcabecera	`{% block subheaderBlock %}`	Espacio reservado bajo la cabecera, normalmente para contener bloques de navegación
5	Acciones de subcabecera	`{% block subheaderActions %}`	Situado en la zona superior derecha, para realizar acciones sobre el contenido que visualizas
6	Título de subcabecera	`{% block subheaderTitle %}`	Situado bajo los bloques de navegación y acciones, muestra el título del contenido de la página
7	Menú de subcabecera	`{% block subheaderMenu %}`	Situado bajo el bloque de título de subcabecera, permite incluir un menú horizontal para navegar entre varios contenidos relacionados
4	8	Sección principal	`<main>`	Contenedor con anchura determinada con el contenido principal y otros bloques
5	9	Notificacion de cabecera	`{% block notificationHeaderBlock %}`	Situado al principio del contenido
	Notificacion de pie de página	`{% block notificationFooterBlock %}`	Situado al final del contenido
6	10	Contenido	`{% block contentBlock %}`	Contenido principal
7	Notificación interior	`{% block notificationInnerContentBlock %}`	Se sitúa al principio del contenido interior
8	Contenido interior	`{% block innerContentBlock %}`	Contenido principal dentro de la sección interior
9	10	Menú lateral	`{% block sidebarBlock %}`	Barra lateral que ocupa el 25% de la anchura de la sección
11	Sección interior	`section`	Contenedor con anchura del 75% del ancho de la sección cuando la plantilla contiene el bloque de menú lateral. Muestra el contenido del item.
12	Notificación interior	`{% block notificationInnerContentBlock %}`	Se sitúa al principio del contenido interior
13	Contenido interior	`{% block innerContentBlock %}`	Contenido principal dentro de la sección interior
7	10	11	14	Pie de página	`{% block footerBlock %}`	Ocupa el ancho de la ventana para incluir el componente pie de página
8	11	12	15	Modal	`{% block modalBlock %}`	Zona reservada para ejecutar acciones una vez se carga la página