Cómo crear un ScrollSpy en Bootstrap 5
Este artículo reconoce sobre
- Creación de Scrollspy
- Scrollspy con Navbar
- Scrollspy con grupo de listas
Crear scrollspy
ScrollSpy se puede aplicar en los dos componentes:
- Barra de navegación
- Grupo de listas
Scrollspy con Navbar
Para crear un ScrollSpy, use el data-bs-spy = "Scroll" atributo para hacer que el área requerida sea desplazable. Por ejemplo, elegimos el cuerpo HTML como el área desplazable. Dar identificación o nombre de clase de la barra de navegación a Data-BS-Target Atributo a conectar Navbar o Group List con área desplazable.
Código para la sección Head
Código para la sección del cuerpo
Sección 1
Sección 2
Seccion 3
Sección 4
Sección 5
Sección 6
Así es como se crea un ScrollSpy en Bootstrap 5.
Scrollspy con grupo de listas
A continuación se muestra un ejemplo de ScrollSpy con un grupo de lista. El atributo data-bs-spy = "Scroll" se usa para hacer que el Div se designe y Data-BS-Target El atributo se usa para asegurarse de que el contenido esté conectado al área desplazable. Por último, para habilitar el ScrollSpy, use el código JavaScript y establezca la posición del cuerpo en relativa.
Código para la sección Head
Código para la sección del cuerpo
Bootstrap scrollspy
Sección 1
Sección 2
Seccion 3
Sección 4
Sección 5
Sección 1
Bootstrap 5 ScrollSpy Plugin es un sistema de navegación que resalta los enlaces de Navbar a medida que el usuario se desplaza
página. ScrollSpy indica la posición del usuario en una página web que les ayuda a ver dónde están
de pie en esa página. ScrollSpy solo se usa con NAV o grupos de listas. Antes de usar ScrollSpy el pariente
La posición debe aplicarse al cuerpo HTML.
Sección 2
Bootstrap 5 ScrollSpy Plugin es un sistema de navegación que resalta los enlaces de Navbar a medida que el usuario se desplaza
página. ScrollSpy indica la posición del usuario en una página web que les ayuda a ver dónde están
de pie en esa página. ScrollSpy solo se usa con NAV o grupos de listas. Antes de usar ScrollSpy el pariente
La posición debe aplicarse al cuerpo HTML.
Seccion 3
Bootstrap 5 ScrollSpy Plugin es un sistema de navegación que resalta los enlaces de Navbar a medida que el usuario se desplaza
página. ScrollSpy indica la posición del usuario en una página web que les ayuda a ver dónde están
de pie en esa página. ScrollSpy solo se usa con NAV o grupos de listas. Antes de usar ScrollSpy el pariente
La posición debe aplicarse al cuerpo HTML.
Sección 4
Bootstrap 5 ScrollSpy Plugin es un sistema de navegación que resalta los enlaces de Navbar a medida que el usuario se desplaza
página. ScrollSpy indica la posición del usuario en una página web que les ayuda a ver dónde están
de pie en esa página. ScrollSpy solo se usa con NAV o grupos de listas. Antes de usar ScrollSpy el pariente
La posición debe aplicarse al cuerpo HTML.
Sección 5
Bootstrap 5 ScrollSpy Plugin es un sistema de navegación que resalta los enlaces de Navbar a medida que el usuario se desplaza
página. ScrollSpy indica la posición del usuario en una página web que les ayuda a ver dónde están
de pie en esa página. ScrollSpy solo se usa con NAV o grupos de listas. Antes de usar ScrollSpy el pariente
La posición debe aplicarse al cuerpo HTML.
Así es como se crea ScrollSpy utilizando grupos de lista.
Conclusión
ScrollSpy se crea usando atributo data-bs-spy = "Scroll" y Data-BS-Target Atributo en la etiqueta del cuerpo para que sea desplazable y si desea aplicar estos atributos en un DIV, agregue compensación de datos atributo y establecer desbordamiento a auto. En el artículo anterior, el proceso de creación de un ScrollSpy se explica en detalle y hacer que ScrollSpy funcione correctamente siempre que se asegure de que la posición de su cuerpo esté establecida para relativo.