Cómo crear barra de navegación fija al hacer scroll en WordPress

Vamos a crear una barra de navegación que se quede fija al hacer scroll en resoluciones grandes. En móviles puede llegar a ser molesto ya que tapa parte de la pantalla. Además, en resoluciones pequeñas se suele usar el menú hamburguesa y no tendría mucho sentido. ¡Vamos allá!

Para detectar el nivel de scroll usamos Javascript, en este caso JQuery. Agregaremos la funcionalidad en window. Abrimos el archivo scripts.js y escribimos el siguiente código:

Window.onscroll = () => {

      // Detectamos el scroll hacia arriba o abajo
      Const scroll = window.scrollY;
      // Seleccionamos la barra de navegación en HTML con la clase barra-navegacion

Const headerNav = document.querySelector(‘.barra-navegacion’);

// Si la cantidad de scroll es mayor a, agregamos una clase, la llamaremos fixed-top
If(scroll > 300) {
      headerNav.classList.add(‘.fixed-top’);
} else {
      // Si la barra es menor quitamos la clase
      headerNav.classList.remove(‘.fixed-top’);
}

Aplicaremos los estilos en CSS en una resolución grande, por lo que usaremos un media queri:

@media (min-width: 768px) {
      .fixed-top {
        Postion: fixed;
        Width: 100%;
        Top: 0;
        Left: 0;
        // Puede ser que haya que cambiar el color de fondo
        background-color: #colorquecontraste
        padding: 1rem 5rem;
        height: 10rem
        z-index: 10; // Ir probando para que el menú quede por encima
        transition: all .4s ease;
      }
        // Cambiar el ancho del logo en caso de ser muy grande
        .fixed-top img {
             Width: 12rem;
}

Suele dar un salto brusco al aparecer el menú de navegación, se puede medio solucionar poniendo esto en el script de JQuery:

const = documentBody = document.querySelector(‘body’);

Y en el condicional:

En el if

documentBody.classList.add(‘fitop-activo’);

En el else

documentBody.classList.remove(‘fitop-activo’);

Y lo agregamos al CSS dentro del media queri:

Body. fitop-activo {
      margin-top: 4rem;
}