Cómo crear un Sticky Header

Para qué sirve

En temas de Usabilidad es muy importante ayudar a los usuarios a tener accesibilidad siempre a elementos importantes de tu sitio, este podría ser el caso del Header de tu sitio donde generalmente se encuentra la navegación principal, es por eso que para simplificar la navegación a tus usuarios y evitar que constantemente tengan que hacer scroll hacia arriba, puedes hacer uso de un Sticky Header.

Ya antes habíamos hablado de la propiedad Position: Sticky y hoy haremos uso de esa propiedad junto con un poco de ayuda de JavaScript y HTML.
Para este ejemplo utilizaremos el formato HTML del top header de Bootstrap 4.

Header normal

Esta versión no tiene la opción de pegarse al tope de la pantalla al hacer Scroll Down.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

See the Pen
Header Sticky - 1 by CSS Tianguis (@css-tianguis)
on CodePen.

Sticky Header usando sólo CSS

Esta versión se pega al tope de la pantalla al hacer Scroll Down.

Para lograr esto agregaremos la propiedad sticky a la etiqueta header.

header {position: sticky;top: 0;}

See the Pen
Header Sticky - 2 by CSS Tianguis (@css-tianguis)
on CodePen.

Sticky Header con jQuery

Esta versión funciona con la ayuda de jQuery, básicamente lo que hace es que al hacer scroll hacia abajo el header desaparece, pero cuando hacemos scroll up, este vuelve ser visible, así ayudamos al usuario a tener siempre la mayor visibilidad de la pantalla, al mismo tiempo que le permitimos tener las opciones de navegación al primer intento de regresar hacia arriba.

Para lograr esto necesitaremos hacer dos cosas, la primera es agregar la clase .main-header a la etiqueta header y segundo agregar el siguiente CSS a tu hoja de estilos.

header.nav-up {top: -84px;}

header.nav-down {position: fixed;top: 0;left: 0;right: 0;background: #fff;box-shadow: 0 1px 10px rgba(0,0,0,0.1);}

También será necesario que agregues el código jQuery en el ejemplo.

See the Pen
Header Sticky - 3 by CSS Tianguis (@css-tianguis)
on CodePen.