Cómo funciona realmente la posición de CSS Sticky

En esta ocasión en tutoriales en linea mostraremos cómo funciona realmente la posición de CSS Sticky o Pegajosa. Hoy la consideramos una propiedad muy útil de posicionamiento en CSS - Sticky. Se anunció en 2016, pero hace poco apareció un buen soporte de navegador.

Y la razón es que la posición: Sticky; Muy poco utilizado por los desarrolladores, muy probablemente debido a que desde el momento del lanzamiento y el momento de soporte de esta propiedad por parte de los principales navegadores es muy grande, simplemente fue olvidado por este. Sí, y la lógica, aunque simple, y la primera vez, seguro, todo funcionará hasta la primera unión.

Hasta mayo de 2016, solo había 4 opciones para posicionar un elemento en una página: estática, relativa, absoluta y fija (estática, relativa, absoluta, fija). Todo el mundo sabe eso. La posición estática y relativa conservan su posición en el flujo general del documento, pero la absoluta y la fija no. Su posición es eliminada y tienen un comportamiento "flotante". Pero ahora no voy a entrar en los detalles de cada una de las propiedades de la posición.

Elementos Sticky

El posicionamiento fijo ha asumido las capacidades de cada una de las 4 opciones para la posición y es más como fijo. Se utiliza para arreglar el elemento pero no en una posición determinada, como lo hace la reparación, sino en una ubicación determinada del contenedor cuando se desplaza por la página. Es muy conveniente utilizarlo en el menú o la navegación, así como en el encabezado de la tabla.

Posición CSS : Sticky - pegajosa: Mantiene los elementos posicionados como "fijos" o "relativos" en función de cómo aparezcan en la ventana gráfica. Como resultado, el elemento se "bloquea" cuando es necesario mientras se desplaza.

Es muy fácil de usar:

.block {
  position: sticky;
  top: 0;
}

En este ejemplo, prescribí una posición "pegajosa" y top: 0; He indicado un punto donde, cuando se desplaza, el elemento se vuelve fijo, pero no pierde sus otras propiedades, como si acabara de aplicar la posición: fijo;

Por qué la posición Sticky ¿puede que no funcione?

Es muy importante entender que la posición pegajosa no funcionará si la altura o el ancho del contenedor principal era mayor que el tamaño del elemento.

<style>
  .sticky{
     position: sticky;
     top: 0;
  }
</style>

<div class="wrapper">
   <div class="sticky">
      Cualquier contenido...
   </div>
</div>

En esta variante, la adherencia no funcionará, porque no se especifica una altura para el elemento de envoltura. En otras palabras, para el elemento adhesivo debe crear un contenedor en el que se ubicará. No puede tener espacio como en el caso de absoluto o fijo.

En consecuencia, para el elemento de envoltura, debe agregar una altura específica o estirarla a una altura con algún contenido. Es muy importante recordar y comprender que al asignar un posicionamiento adhesivo a un elemento, su contenedor principal se convierte automáticamente en "adhesivo" y el elemento adhesivo no puede ir más allá del contenedor adhesivo.

Aquí está el resultado del trabajo:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Navegación pegada</title>
  <style>
   .wrapper {
    min-height: 1000px; /* Altura minima */
   }
   .header, .sticky {
    color: #fff; /* Color del texto */
    padding: 10px;  /* Sangría*/
   }
   .header {
    background: #009d4b; /* Color de fondo */
   }
   .sticky {
    background: #3989c9; /* olor de fondo  */
    position: sticky; /* Posicionamiento pegajoso */
    top: 0; /* Posición en la parte superior */
   }
   .content {
     padding: 20px 10px; /* Sangría */
   }
   .footer {
     background: #f9f9f9; /* olor de fondo  */
     padding: 10px; /* Sangría */
   }
  </style>
 </head>
 <body>
  <div class="wrapper">
    <header class="header">Nombre del sitio</header>
    <nav class="sticky">Navegación del sitio</nav>
    <div class="content">Cualquier contenido</div>
    <footer class="footer">Pie de página del sitio</footer>
  </div>
 </body>
</html>

Ver resultado

Conclusión

Posición: Sticky - pegajosa; - muy util para hacer que el menú se mantenga en la parte superior de la pantalla, dos líneas son suficientes para el elemento de menú en .css, ¡no es un alto! ¿Alguna pregunta? Por favor en los comentarios!