Esta técnica eficaz y poderosa es mucho más fácil de lograr de lo que cabría esperar.

En diseño web, un encabezado fijo es una herramienta poderosa que mejora la experiencia y la navegación del usuario. A medida que los usuarios se desplazan hacia abajo en una página web, un encabezado fijo permanece visible, lo que garantiza que los enlaces de navegación esenciales estén siempre accesibles. Profundicemos en las complejidades de crear un encabezado fijo usando CSS.

¿Para qué sirve un encabezado adhesivo?

Un encabezado fijo permanece en un lugar de una página web, incluso cuando el usuario se desplaza. Propiedades CSS específicas, principalmente posición: pegajoso, le ayudará a lograr este comportamiento. Algunos beneficios de tener un encabezado fijo incluyen una experiencia de usuario mejorada y una navegación sencilla por el sitio web.

  • Los usuarios pueden acceder fácilmente a los enlaces de navegación principales sin tener que desplazarse hasta la parte superior.
  • El logo o nombre de la marca permanece visible, reforzando la identidad de la marca.
    • instagram viewer
  • Un encabezado fijo puede ahorrar espacio al eliminar la navegación de la barra lateral, dejando más espacio para el contenido.

Diseño del encabezado: estructura HTML

La base de cualquier encabezado fijo es su estructura HTML. A continuación se explica cómo crear los elementos HTML necesarios para su encabezado adhesivo.

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

Esta estructura utiliza un encabezado que contiene el logotipo y un elemento de navegación con una lista desordenada de enlaces de navegación. Luego utiliza una etiqueta principal y varias etiquetas de sección para representar cada sección de la página. Por el momento, la página se ve así:

Sentando las bases con CSS

El código CSS siguiente utiliza propiedades del modelo de caja como relleno, margen y flexbox para crear un diseño atractivo, con una altura para cada sección de marcador de posición.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


main,
section { height: 100vh; }


.logo { font-size: 3rem; }


main,
header,
section {
display: flex;
align-items: center;
}


main { justify-content: center; }


header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb; 
}


navul {
display: flex;
column-gap: 2rem;
list-style: none;
}


a {
text-decoration: none;
font-size: 2rem;
color: #333;
}


section { justify-content: center; }


#home { background: #2c3e50; }


#about { background: #ccccff; }


#services { background: #f5b7b1; }


#contact { background: #40e0d0; }


h1 {
 font-size: 4rem;
 color: #fff;
}

La página ahora debería verse así:

Implementando el efecto adhesivo: CSS

Actualmente, cuando te desplazas hacia abajo en la página, notarás que el encabezado se mueve fuera de la pantalla. Para solucionar este problema, utilice la propiedad de posición CSS y configure el encabezado como fijo.

Esta propiedad se comporta como una combinación de posicionamiento relativo y fijo, dependiendo de la posición de desplazamiento del usuario.

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

Configurar el encabezado como fijo garantiza que se mantenga en una posición en la página independientemente del desplazamiento. La propiedad superior especifica en qué parte de la página se debe colocar el encabezado. Ahora, al desplazarse hacia abajo en la página se obtiene:

Abordar posibles problemas de apilamiento

A veces, otros elementos de la página pueden superponerse con el encabezado fijo. Para garantizar que el encabezado permanezca en la parte superior, puede agregar la propiedad z-index:

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

Finalmente, agregue la propiedad de desplazamiento suave al elemento HTML para una mejor experiencia de usuario:

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

La página ahora debería desplazarse suavemente entre las secciones:

Mejorando la navegación web con encabezados adhesivos CSS

Agregar un encabezado adhesivo al diseño de su sitio web puede mejorar enormemente la experiencia del usuario. Esta función mantiene a los usuarios conectados al menú principal, mantiene una marca consistente y le da a su sitio web un aspecto moderno.

Con el poder de CSS, crear este efecto es sencillo y efectivo. Las tendencias de diseño web cambian con el tiempo, pero el encabezado fijo siempre es útil para diferentes industrias.