Ofrecer enlaces para compartir y otros artículos a tus visitantes siempre es una buena idea, especialmente en un blog. En este tutorial, crearemos un menú fijo que se sitúa junto al contenido principal de una entrada de blog y acompaña a los visitantes mientras navegan por la página.
Aquí tienes una demostración en vivo de la barra lateral fija que vamos a construir.
Paso 1: Añade el fragmento de CSS
Empieza colocando un widget de incrustación HTML en el lienzo y pega el siguiente fragmento de CSS dentro de la ventana modal:
<style>
.sticky-aside {
position: -webkit-sticky;
position: sticky;
}
</style>
Nota: Puedes colocar este fragmento en la sección de código personalizado del encabezado en la configuración del proyecto, pero no podrás ver el efecto a menos que estés en el sitio publicado.
Paso 2: Añade el menú y el contenido
Coloca un contenedor en el lienzo y, dentro de él, coloca un div. Asígnale la clase "Flex Row" con los siguientes ajustes:
Display: Flex, Horizontal, Justify: Left, Align: Top
Coloca otro div dentro de la fila flexible recién creada y asígnale la clase "Main Col" con los siguientes ajustes. Aquí es donde irá el contenido principal de tu página.
- Flex Item: Expand
- Padding (Right): 50px
- Max Width: 70%
Este es un buen momento para añadir contenido. En nuestro caso, tenemos un texto de prueba para el blog, pero por supuesto puedes usar esto como parte de tu sitio gestionado por CMS.
Añade otro div junto al div "Main Col" y asígnale el nombre de clase "Sticky Aside" con estos ajustes:
- Position: Absolute, Top
- Min Width: 30%
Aquí es donde pondrás el contenido que siempre quieres tener a la vista. Hemos añadido una barra de búsqueda, tres de las últimas entradas del blog y botones para compartir en redes sociales; puedes poner lo que quieras en el tuyo. El desglose de cómo dar estilo a los elementos añadidos al menú lateral lo dejaremos para otro día.
¡Publícalo y pruébalo!
Paso 3: Dale fluidez con interacciones
Si tu sitio web tiene una navegación fija como mi sitio de demostración, probablemente notarás que la barra lateral fija se queda atrapada detrás. Para solucionar esto y darle un toque de chispa, ¡vamos a añadir algunas interacciones!
Abre el panel de interacciones y, en la sección "En la página actual", haz clic en el icono de más. Selecciona "Mientras la página se desplaza" en el menú desplegable.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
En la sección "Al desplazar", selecciona "Reproducir animación de desplazamiento" en el menú desplegable. Cambia la suavidad al 90% y haz clic en el icono de más.
Llama a la interacción "Mover lateral al desplazar", ve al lienzo y selecciona el elemento de la barra lateral fija. En el panel de interacciones, haz clic en el marcador del 0% y selecciona la acción "Mover" en el menú desplegable.
En la primera instancia, ajusta el eje Y a "0px".
Al 100%, selecciona y cambia el fotograma clave a "14%". En mi ejemplo, muevo la barra lateral fija 90px hacia abajo, pero es posible que tengas un encabezado o una navegación más grande que salvar. Puedes experimentar con la distancia que necesites que recorra.
¡Listo! ¡Publica y prueba!
