Implementar barra de pestañas dinámica y adhesiva

Introducción

En este proyecto, aprenderás a implementar una barra de pestañas dinámica que se fija en la parte superior de la página cuando el usuario desliza hacia abajo. Esta característica es común en aplicaciones móviles y sitios web, brindando una experiencia de usuario fluida e intuitiva.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar la barra de pestañas dinámica utilizando la posición CSS
• Cómo implementar el comportamiento de desplazamiento para mantener la barra de pestañas en su posición original hasta que el usuario deslice más allá de la barra de título
• Cómo probar la característica de barra de pestañas dinámica y asegurarse de que funcione como se espera

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar la propiedad CSS position: sticky para crear una barra de pestañas fija
• Probar y depurar la característica de barra de pestañas dinámica para brindar una experiencia de usuario sin problemas

Configurar la estructura del proyecto

Para comenzar, abre el entorno de experimentación y la estructura de directorios es la siguiente:

├── css
│   └── style.css
├── images
│   ├── 1.png
│   └── 2.png
├── index.html
└── js
    └── index.js

Entre ellos:

• css/style.css es el archivo de estilo.
• index.html es la página principal.
• js/index.js es el archivo js de la página.
• La carpeta images contiene los archivos de imagen utilizados en el proyecto.

1. Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.
2. Abre "Web 8080" en la parte superior de la VM y actualízala manualmente, el efecto debería ser el siguiente:

3. Copia la dirección que comienza con http en la imagen anterior en tu navegador y abre una nueva ventana.

Configurar la barra de pestañas dinámica

En este paso, aprenderás a configurar la barra de pestañas dinámica que se fijará en la parte superior de la página cuando el usuario deslice hacia abajo.

1. Abre el archivo style.css en el directorio css.
2. Localiza la clase .buttons en el archivo CSS. Esta clase representa la barra de pestañas.
3. Agrega el siguiente código CSS dentro de la clase .buttons:

position: sticky;
top: 0;

La propiedad position: sticky hace que la barra de pestañas se pegue a la parte superior de la página cuando el usuario desliza hacia abajo. La propiedad top: 0 asegura que la barra de pestañas quede fija en la parte superior de la página.

Probar la barra de pestañas dinámica

1. Guarda los cambios en el archivo style.css.
2. Actualiza la ventana del navegador que está mostrando la página web.
3. Desliza la página hacia arriba y hacia abajo y observa el comportamiento de la barra de pestañas. Debería permanecer en su posición original hasta que el usuario deslice hacia abajo más allá de la barra de título, momento en el que debería fijarse en la parte superior de la página.

¡Felicitaciones! Has implementado con éxito la característica de barra de pestañas dinámica para el sitio web del curso.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.