Cómo utilizar Position: Sticky para las barras laterales con CSS puro y Bootstrap

Introducción

Una barra lateral fija es una técnica de diseño web que permite mantener la barra lateral en la pantalla incluso si el usuario se ha desplazado más allá de la posición en la que se mostró inicialmente. Esto resulta útil para facilitar el acceso a la subnavegación, resaltar más el contenido de la barra lateral a medida que el usuario se desplaza y, potencialmente, aumentar las impresiones de anuncios, los clics y las visitas a la página.

En el pasado, esta funcionalidad se lograba frecuentemente a través de cálculos de JavaScript para detectar la posición de desplazamiento y alternar un elemento positiona absoluteo fixed.

Actualmente, la especificación W3C ha definido stickyel posicionamiento y muchos navegadores modernos ya la han adoptado.

En este tutorial, creará una página web con una barra lateral que utiliza position: stickyBootstrap 4.

Prerrequisitos

Esta demostración no requiere la configuración de ningún entorno local. Puede seguirla con un editor de código y un navegador de su elección.

Para completar este tutorial, necesitarás:

• Se requieren algunos conocimientos de CSS y HTML. En particular, puede resultar beneficioso tener cierta comprensión de los comportamientos de CSS y las limitaciones de position: absolutey position: fixed.
• Familiaridad con el marco Bootstrap y cómo implementarlo en su proyecto.

Paso 1 — Usoposition: sticky

La especificación de uso requiere que se especifique position: stickyuna dirección como topo con un valor distinto de .bottomauto

Un ejemplo de una clase CSS que utiliza esta propiedad se ve así:

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

Para experimentar position: sticky, puedes crear un nuevo directorio de proyecto:

mkdir position-sticky-example

Y cambia a ese directorio:

cd position-sticky-example

Dentro de este directorio del proyecto, crea un example.htmlarchivo con el siguiente código:

ejemplo.html

!DOCTYPE htmlhtml  head    meta charset="utf-8" /    titleSticky Position Example/title    style      * {        box-sizing: border-box;      }      html,      body {        margin: 0;        padding: 0;      }      .placeholder-example {        background: lavender;        height: 100vh;        padding: 1em;      }      .sticky-example {        background: cornflowerblue;        padding: 1em;      }      .sticky {        position: sticky;        top: 0;      }    /style  /head  body    divSticky/div    divPlaceholder/div  /body/html

Este código crea un divcon la stickyclase y otro divcon la placeholderclase que tiene la altura completa de la ventana gráfica.

Ábrelo index.htmlen tu navegador web y observa cómo position: stickyse comporta a medida que te desplazas hacia arriba y hacia abajo en la página.

Comprobación de la compatibilidad del navegador y uso de alternativas

Antes de adoptar una nueva propiedad CSS, debe investigar qué tan bien la admiten los distintos navegadores. Si una característica no es compatible con los navegadores de su público objetivo, es posible que no sea una buena candidata para adoptarla en su proyecto.

Una herramienta para comprobar la compatibilidad de los navegadores es Can I Use. En este momento, la página Can I Use position: stickyinforma que no hay compatibilidad position: stickycon Internet Explorer. Hay compatibilidad con versiones modernas de Edge, Firefox, Chrome, Safari y Opera. Y hay dos problemas conocidos que se han observado en los que ciertos aspectos de position: stickyno se comportan como se espera en algunos navegadores.

Una alternativa sensata position: stickysería position: relative. No generaría una experiencia de navegación idéntica, pero garantizaría que los usuarios con navegadores no compatibles aún tuvieran acceso al contenido dentro de position: stickylos elementos.

También puede considerar el uso de prefijos de proveedor para propiedades CSS, como position: -webkit-sticky, para abordar versiones anteriores de Safari y Safari de iOS.

La stickyclase reescrita con soporte de respaldo se parecerá a:

.sticky {  position: relative;  position: -webkit-sticky;  position: sticky;  top: 0;}

Este código aprovecha la forma en que un navegador ignorará los valores de propiedad que no reconoce y solo usará el último valor válido.

Con esto concluye una breve introducción al position: stickycomportamiento. Veamos cómo aplicarlo a un escenario avanzado.

Paso 2: creación de una barra lateral fija con Bootstrap 4

El diseño deseado tendrá una barra lateral que se ubicará junto a un bloque largo de contenido. Puedes lograr esto con la biblioteca Bootstrap 4.

A continuación se muestra un diagrama del diseño previsto:

A title-sectionocupa la parte superior de la página. A content-sectionocupa la mayor parte del lado izquierdo de la pantalla. Varios elementos de la barra lateral ocupan el lado derecho de la pantalla: container 1, container 2, container 3y container n.

Cree un nuevo index.htmlarchivo y agregue la biblioteca Bootstrap 4:

índice.html

!DOCTYPE htmlhtml  head    meta charset="utf-8" /    titleSticky Position Sidebar/title    link      rel="stylesheet"      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"      crossorigin="anonymous"    /    style    /style  /headbody/body/html

Para lograr el diseño deseado, su bodycontenido deberá adoptar la estructura de marcado Bootstrap:

índice.html

body  article    div      div        div          div            h1Stacking Sticky Sidebars with Bootstrap 4/h1          /div        /div      /div      div        div          div            Content Section          /div        /div        div          div            div              div                Container 1              /div            /div          /div        /div      /div    /div  /article/body

Este marcado establece una content-section sección que abarca 7 anchos de columna y una sección de barra lateral que abarca 5 anchos de columna. Esto suma 12 columnas, que es el sistema de cuadrícula predeterminado en Bootstrap 4.

Aplicandosticky-top

Bootstrap 4 también viene con una clase de utilidad llamada sticky-topque es funcionalmente la misma que la stickyclase que usted creó anteriormente.

Antes de aplicar sticky-top, agregue algunos estilos para ayudar a que las secciones de contenido y barra lateral sean más evidentes visualmente:

índice.html

style  .content-section {    background: lavender;    height: 1000px;    min-height: 100vh;    padding: 1em;  }  .sidebar-section {    height: 100%;  }  .sidebar-content {    background: cornflowerblue;    padding: 1em;  }/style

Este código define background-color, height, y paddingpara la sección de contenido y barra lateral.

Nota: La heightcantidad proporcionada aquí para la sección de contenido es arbitraria y se utiliza con fines demostrativos. Si tuviera contenido lo suficientemente grande, podría confiar en él para definir su diseño y eliminar la heightpropiedad.

Al visitar index.htmlsu navegador web, debe observar una sección de contenido y una sección de barra lateral más pequeña.

Ahora, agrega la sticky-topclase a sidebar-item:

índice.html

div  div    div      div        Container 1      /div    /div  /div/div

Al desplazarse hacia abajo en la página, la barra lateral debe tener un comportamiento “fijo”.

Probablemente, esta será la solicitud de función más común para la mayoría de los escenarios. Los próximos pasos explorarán escenarios más imaginativos.

Paso 3: Experimentar con escenarios avanzados

En la siguiente sección, tomará el index.htmlarchivo que creó anteriormente y explorará cómo agregar múltiples elementos, apilar elementos de la barra lateral y, finalmente, empujar elementos de la barra lateral fuera de la pantalla.

Experimentando con una barra lateral fija y varios elementos

Siguiendo el ejemplo, puedes agregar elementos adicionales a la barra lateral:

índice.html

div  div    div      div        Container 1      /div    /div    div      div        Container 2      /div    /div    div      div        Container 3      /div    /div    div      div        Container 4      /div    /div  /div/div

Al visitar index.htmlsu navegador web, debe observar una sección de contenido y varios elementos de la barra lateral.

Si convierte la sección de la barra lateral en un cuadro flexible con elementos organizados en un columnwith space-between, puede crear una barra lateral visualmente más interesante:

índice.html

style  /* ... */  .sidebar-section {    display: flex;    flex-direction: column;    justify-content: space-between;    height: 100%;  }  /* ... *//style

Al visitar la página index.htmldesde su navegador web, debería observar una sección de contenido y varios elementos de la barra lateral con espacio entre ellos. Al desplazarse hacia abajo, debería observar que los elementos de la barra lateral se quedan fijos en la parte superior de la pantalla.

Experimento con la acumulación de todos los elementos de la barra lateral

Una solicitud de función común es mantener todos los elementos de la barra lateral “apilados” visualmente en la pantalla.

Para ello, sería necesario conocer el valor heightde cada elemento de la barra lateral y compensar el topvalor fijo. En lugar del valor predeterminado top: 0que proporciona sticky-topla clase, proporcionaría la suma de la altura de los elementos de la barra lateral anteriores.

Dado que en esta demostración se conoce la cantidad de elementos de la barra lateral y su altura, puede aplicar el desplazamiento a cada elemento de la barra lateral usando nth-child:

índice.html

style  /* ... */  .sidebar-item:nth-child(2) {    top: 3.5em;  }  .sidebar-item:nth-child(3) {    top: 7em;  }  .sidebar-item:nth-child(4) {    top: 10.5em;  }  /* ... *//style

Al visitar la página index.htmldesde su navegador web, debería observar una sección de contenido y varios elementos de la barra lateral con espacio entre ellos. Al desplazarse hacia abajo, debería observar que los elementos de la barra lateral se apilan.

Sin embargo, esto se limita al caso de saber que su barra lateral contiene 4elementos de barra lateral que son 3.5emaltos. Cualquier complejidad adicional acentuará las limitaciones de CSS puro y es posible que dedique más tiempo a utilizar una solución de JavaScript.

Experimento con empujar elementos de la barra lateral fuera de la pantalla

Continuando con el ejemplo anterior, una alternativa menos restringida puede ser “empujar” el elemento anterior de la barra lateral fuera de la pantalla.

Primero, debes eliminar los experimentos anteriores con nth-child.

Esta nueva configuración utilizará flex-growla propiedad para .sidebar-item:

índice.html

style  /* ... */  .sidebar-item {    flex-grow: 1;  }  /* ... *//style

Ahora, mueva la sticky-topclase del sidebar-itemelemento al sidebar-contentelemento:

índice.html

div  div    div      div        Container 1      /div    /div    div      div        Container 2      /div    /div    div      div        Container 3      /div    /div    div      div        Container 4      /div    /div  /div/div

Al visitar la página index.htmldesde su navegador web, debería observar una sección de contenido y varios elementos de la barra lateral. Al desplazarse hacia abajo, debería observar un comportamiento de "apilamiento" a medida que los elementos de la barra lateral "empujan" a los elementos anteriores de la barra lateral.

Nota: La versión anterior de este tutorial utilizó un position: absoluteenfoque debido a las limitaciones experimentadas con display: flexboxy position: stickyen los navegadores web en ese momento.

Este ejemplo de CodePen describe el position: absoluteenfoque.

Sin embargo, en el momento de esta revisión, este flexboxenfoque ofrece una mayor flexibilidad y requiere menos manejo de cantidades variables de elementos de la barra lateral, alturas y desplazamientos.

Se pueden realizar más experimentos ajustando anchos, alturas y desplazamientos.

Conclusión

En este tutorial, aprendió sobre la propiedad CSS position: stickyy cómo se puede usar para las barras laterales en sus diseños para diseño web.

Tenga en cuenta que existen limitaciones debido a la compatibilidad del navegador. Es posible que deba recurrir a JavaScript o a position: absoluteuna alternativa según el uso del navegador de su audiencia.

Si desea obtener más información sobre CSS, consulte nuestra página de temas de CSS para obtener ejercicios y proyectos de programación.