Cómo crear un encabezado de sitio web fijo

Los encabezados de sitios web que permanecen en su lugar cuando un usuario se desplaza se han convertido en un elemento de diseño muy popular. Permiten al usuario acceder fácilmente a la navegación sin necesidad de desplazarse hacia arriba cada vez que quiera elegir una página u opción diferente.

Los elementos con esta funcionalidad a menudo se denominan "pegajosos" porque se adhieren al usuario y permanecen visibles a medida que se desplazan por el sitio web. Cuando un usuario llega por primera vez al sitio web, los elementos estarán en su posición inicial, pero luego el encabezado fijo permanecerá en el mismo lugar.

Dado que la navegación es uno de los elementos más importantes de un sitio web, adoptar este enfoque ayuda a que la navegación sea más accesible. Tener una navegación que permanece en su lugar permite que el usuario fluya fácilmente a medida que se desplaza por el contenido del sitio web, lo cual es extremadamente importante.

Los elementos de navegación pegajosos ayudan a crear un flujo de usuario fácil a medida que las personas se mueven por su sitio web.

¿Qué lo hace pegajoso?

El posicionamiento fijo es un componente clave para que la navegación permanezca en su lugar. Este elemento de posición fija se coloca en relación con la ventana gráfica o la propia ventana del navegador. Debido a que la ventana gráfica no cambia cuando se desplaza el sitio, este elemento de posición fija permanecerá en el mismo lugar cuando se desplaza la página.

Nota: no intente esto en su sitio en vivo

Recuerde: nunca debe cambiar el código directamente en su sitio en vivo para asegurarse de que nada se rompa. Nuestra aplicación de desarrollo local gratuita, Local, lo ayudará a configurar un entorno de prueba en el que puede seguir este tutorial de manera segura.

¿Cómo hacemos que la navegación permanezca en un solo lugar?

Hacer que la navegación sea pegajosa no podría ser más fácil; simplemente está hecho con estilo CSS. Básicamente se ve algo como esto:

 [css]

.navbar-fixed-top {

posición: fija;

derecha: 0;

izquierda: 0;

índice z: 999;

}

[/css]

No importa qué tan larga sea su página, o cuántas veces se desplace hacia arriba y hacia abajo, la navegación se "pegará" en la parte superior de la página. Se agregó una clase llamada .navbar-fixed-top a la navegación que crea la ubicación para la navegación. Agregué esta clase a la etiqueta de navegación. La posición se establece en fijo y agregar posicionamiento izquierdo y derecho garantiza que la ubicación sea correcta y ocupe todo el ancho de la página.

Tenga en cuenta que cada vez que se aplique esta clase, creará la posición fija del elemento. Lo más probable es que esta clase solo se aplique una vez, de lo contrario, habría varios elementos de página que se comportarían de la misma manera en el mismo lugar, creando un desorden.

Otra consideración importante es el índice z. Como queremos que la navegación esté siempre visible, debemos asegurarnos de que otros elementos no la superpongan. Cuando hacemos referencia al z-index , estamos hablando de la propiedad CSS que establece el orden de pila de elementos específicos. Un elemento con mayor orden de apilamiento siempre está delante de otro elemento con menor orden de apilamiento. Un valor de 999 es un número grande, por lo que es una apuesta segura para la navegación.

Ajustar el cuerpo de la página

Debido a que la navegación ahora está en una posición fija, cubrirá parte del contenido en la parte superior. Hay una solución simple para esto. Agregar relleno en la parte superior del cuerpo empujará la página hacia abajo para que el contenido en la parte superior no quede cubierto por el encabezado cuando el usuario llegue a la página.
Puede agregar relleno al cuerpo en su archivo CSS:

 [css]

cuerpo {

acolchado superior: 75px;

}

[/css]

Tenga en cuenta que su relleno puede ser más grande o más pequeño según el grosor del encabezado fijo.

Hacer que el encabezado adhesivo sea blando

Es común encontrar un encabezado que se vuelve más delgado cuando un usuario se desplaza más allá de cierto punto, lo que hace que se vea blando. Cuando la navegación disminuye de tamaño, ayuda a que el usuario tenga más espacio para ver el contenido principal del sitio web. Esto es particularmente útil en dispositivos más pequeños. Usaremos una combinación de CSS y JavaScript para que esto suceda.

Squishy Navigation con AnimatedHeader Script

Para agregar un encabezado animado que cambiará su tamaño al desplazarse, existe una solución excelente y liviana para hacer que la navegación sea blanda. Se llama encabezado animado. Tiene una licencia MIT, por lo que puede usarse para proyectos personales o comerciales. Para obtener estos archivos, consulte AnimatedHeader en GitHub.

CSS básico para la navegación

Echemos un vistazo a dos estilos CSS importantes. El primero probablemente le resulte familiar, .navbar-fixed-top , que especifica nuestra altura, ancho y posición fija para la navegación fija. A continuación, puede ver que se agregó otra clase que especifica una altura de 75 px. Este es el tamaño "aplastado".

 [css]

.navbar-fixed-top {
posición: fija;
superior: 0;
izquierda: 0;
ancho: 100%;
fondo: #f6f6f6;
índice z: 999;
altura: 90px;
desbordamiento: oculto;
-transición webkit: altura 0.3s;
-moz-transición: altura 0.3s;
transición: altura 0,3 s;
}

.navbar-fixed-top.cbp-af-header-shrink {
altura: 75px;
}

[/css]

Para cambiar el tamaño, se usa JavaScript para agregar la clase de .cpb-af-header-shrink . Echemos un vistazo a la parte del script que hace que esto suceda:

 [javascript]

función scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add (encabezado, 'cbp-af-header-shrink');
}
demás {
classie.remove(cabecera, 'cbp-af-header-shrink');
}
hizo Desplazamiento = falso;
}

[/javascript]

Solo un recordatorio, hay más en el script, así que asegúrese de descargar el código fuente para tener todos los componentes. Como puede ver, después de que un usuario se desplaza más allá de cierto punto, se agrega la clase de .cpb-af-header-shrink . Si el usuario se desplaza hacia atrás en la página, esta clase se elimina.

La opción de posicionamiento fijo de CSS

También hay una opción que puede ser menos complicada. Dependiendo del soporte del navegador para el que esté diseñando, position: sticky; hace que la creación de un encabezado fijo sea muy simple. El soporte del navegador no es terrible, pero tampoco es completamente global. Cuando haya declarado Sticky, se pueden usar prefijos. Echa un vistazo a Can i Use para obtener más detalles.

Una forma sencilla de describir el posicionamiento fijo es que es una combinación de posicionamiento relativo y fijo. Supongo que te encuentras un poco con el posicionamiento pegajoso. Estamos hablando de encabezados aquí, pero también es útil para cualquier elemento de la interfaz de usuario que desee que sea "pegajoso" a medida que los usuarios se desplazan. Ven que se "atasca" cuando el elemento llega a una distancia específica desde el borde de la ventana gráfica.

El elemento se trata como una posición relativa hasta que llega a un punto determinado y luego se "fija". Este punto se declara mediante CSS. El "punto" es básicamente cuando especifica arriba, abajo, izquierda o derecha, como lo haría con el posicionamiento absoluto. Debe especificar para que el elemento tenga algo a lo que "pegarse".

Posición de uso: pegajoso

Es bastante simple de usar. Algunas declaraciones de CSS y pude tener un encabezado fijo. Aquí hay tres pasos simples:

1. Encuentre el estilo correcto para que pueda declarar el elemento como fijo usando position:sticky; (no olvide los prefijos del navegador como position: -webkit-sticky; ).
2. Elija el "borde pegajoso" (superior, derecho, inferior o izquierdo) para que el elemento se "pegue".
3. Declare la distancia desde el "borde pegajoso", es decir, 10 px para un encabezado que se vuelve pegajoso cuando está a 10 px del área de desplazamiento.

 [css]

.navbar-fixed-top {
  posición: -webkit-sticky;
  posición: pegajosa;
  superior: 0;
}

[/css] 

No quería ningún espacio entre el encabezado adhesivo y la ventana gráfica, por lo que está a 0 píxeles desde la parte superior. Puedes ver este ejemplo en Codepen.

Tenga en cuenta estas situaciones de desbordamiento pegajosas

Compatibilidad de desbordamiento

Es genial, pero no es perfecto. Hay algunas limitaciones. El desbordamiento a veces puede ser un poco impredecible. Es mejor mantenerse alejado de ciertos tipos de desbordamiento en un elemento principal con algo que necesita position: sticky . Puede haber problemas con el desbordamiento automático, el desplazamiento o la ocultación.

Soporte de navegador limitado

El soporte del navegador es limitado, por lo que usar la regla supports para detectar si el navegador actual admite el posicionamiento fijo es una opción. Eso parece como:

 [css]

@supports(posición:pegajoso){
  .encabezamiento{
    posición: -webkit-sticky;
    posición: pegajosa;
    superior: 0;
  }
}

[/css]

Es importante pensar si el posicionamiento fijo es absolutamente necesario. Si es así, se puede utilizar el enfoque de posicionamiento fijo. Si no es absolutamente necesario, o la compatibilidad con el navegador no es una preocupación, el enfoque fijo es más fácil de implementar.

Puede parecer complejo al principio, pero no hay razón para quedarse atrapado en una rutina de navegación; es relativamente simple hacer que su navegación sea pegajosa y blanda. Con un simple posicionamiento fijo de CSS, puede crear fácilmente un encabezado de sitio web fijo. Con un poco de JavaScript simple, la navegación fija se puede mejorar comprimiéndola a una altura reducida, lo que brinda a los usuarios más espacio para ver el contenido del sitio web.

No intente esto en su sitio en vivo

¡Cree un encabezado de sitio web fijo para sus sitios alojados en WP Engine en Local! ¡Aprenda más y descárguelo gratis aquí!