A LOS QUE NO LO FUNCIONA EL sticky-top, EN LAS NUEVAS VERSIONES DE BOOTSTRAP NO SE USA ASI, AHORA LO CAMBIARON POR fixed-top
Introducción al curso
Repositorio del curso de bootstrap
Bootstrap 4 ¿Qué trae de nuevo esta versión?
¿Que es un framework de frontend?
Nuestro Proyecto: Hola Mundo de Bootstrap
Creando el sitio web
La grilla de Bootstrap
Reto: La grilla de Bootstrap
El footer
El header de nuestro sitio
Creando un carousel de imágenes
Agregando texto informativo del evento
Agregando botones
Las cards de Bootstrap 4
Pastillas de texto
Agregando un contenedor de ancho completo
Los formularios de Bootstrap 4
Agregando un tooltip
Scrollspy: Conociendo la ubicación del usuario en el header
Agregando un modal para comprar tickets
Un nuevo formulario para completar la compra
Deploy a producción
Poniendo nuestro sitio en producción
Conclusiones del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Recursos
El scrollspy le permite al usuario conocer la posición dentro del sitio. Revisa más sobre este componente en: https://getbootstrap.com/docs/4.1/components/scrollspy/
Aportes 63
Preguntas 11
Ordenar por:
Hay un problema cuando se cambia el id del nav a “navbar” y es que cuando la pantalla es pequeña, el botón para desplegar el menú del nav deja de funcionar.
Para solucionarlo solo debes cambiar de esto:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
A esto:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
En boostrap 5 lo unico que hay que hacer es agregarle ‘bs’ en medio de los atributos
ej:
<code>
<body data-bs-spy="scroll"
data-bs-target=" #navbarSupportedContent"
data-bs-offset="56"
>
Apuntes:
Bootstrap nos permite saber la ubicación actual del menú donde nos encontramos a traves de la herramienta scroolspy. Para que esto sea posible debemos hacer lo siguiente:
-
Ir a la documentación como apoyo para implementación: https://getbootstrap.com/docs/4.1/components/scrollspy/
-
Asignarle al body los atributos de:
data-spy="scroll" data-target="#navbar" -
Asignarle al div que contiene las etiquetas <a> de nagevacion la id de “navbar”.
<div class="collapse navbar-collapse" id="navbar"> -
Debemos asignar a los atributos “href” del menú de navegación las id que le colocamos a las secciones anteriormente.
-
Podemos opcionalmente agregar la clase a la etiqueta <nav> de “.sticky-top” para que la barra de navegación nos acompañe.
-
Es recomendable remover la clase “active” al ítem de navegación de inicio.
-
Debemos asignar una clase adicional la etiqueta de body, la cual es “.data-offset=[numero]” y como número, debemos asignarle el alto de la barra de navegación. De esta manera optimizamos el Scrollspy.
Al agregar estos cambios de la clase, el menú de hamburguesa en el responsive deja de desplegarse, esto es porque esta apuntando al
id=“navbarSupportedContent” y lo hemos cambiado a “navbar”, así que cambiamos el data-target y el aria-controls a #navbar y navbar y listo!
El “sticky-top” lo cambiaron en la versión 4.1 por el “fixed-top”, solo actualicen eso y debería funcionar.
Para los que esten usando la version 5 de bootstrap deben utilizar
data-bs-spy="scroll" data-bs-target="#navbar"
Así hay varias cositas que se deben cambiar si estan usando esta version de bootstrap com los son margin, padding, align, etc…
ms-1...5 = margin start = margin left
me-1...5 = margin end = margin right
Revisar la documentación de la version de bootstrap que esten usando.
Para Bootstrap 5.0, en la configuración del body, ya no es:
<body data-spy="scroll" data-target="navbar">
Ahora es:
<body data-bs-spy="scroll" data-target="navbar">
Un tip, al cambiar el ID al <nav> se pierde la funcionalidad que bootstrap le da al botón hamburguesa de desplegarse en pantallas pequeñas.
Es mejor agregar el nombre completo del ID del nav al data-target:
<body data-spy=“scroll” data-target="#navbarSupportedContent" data-offset=“59”>
Me tocó cambiar el sticky -top por fixed-top para que se pegara el menú, a alguien mas le paso así??
Ahora para la version v5.1.0 se usa casi igual, tienen que agregarle un -bs- en el medio, ejemplo data-bs-spy=“scroll” data-bs-target="#navbar-example2".
Los atributos que usamos:
data-spy=" " lleva como valor scroll.
data-target=" " lleva como valor el id del elemento del menú.
data-offset=" " una cantidad de pixeles, de tu header para que no se pierda la iluminación correcta de los elementos.
USE this fixed-top instead of sticky-top , the latter doenst work.
al igual que ha @kevinbrayanluna
A mi no me funciono poniendo sticky-top, tuve que poner fixed-top!!
El sticky-top lo coloqué en el header y funcionó.
Tambien se puede poner data-offset="0", y funcionara correctamente el scrollspy.
a mi no me funciono el Sticky D:
Para los que no les funciona el menu hamburguesa. Ya estamos usando version 5.1, puede que al arrancar el curso hayan usado la version 4. Hay un pequeño cambio en el boton: En las versiones viejas data-toggle y data-target no tenian el -bs-. (Ademas revisar que los nombres de data-bs-target y aria-controls correspondan con el id del navbar que se modifico.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Para que funcione el menú hamburguesa debe coincidir el data-bs-target, aria-controls y el id del div que contiene los enlaces.
POr más que intento probar con otros números según el alto de mi nav, la parte de La conerencia conla clase data-offset no se me ilumina, no ´se qué hacer, una mano por favor
Si aplicas el scrollspy directo sobre el body, tienes el problema de que a la hora de hacer click en el enlace, te manda un poquito más abajo (por el offset que ponemos para compensar el header). Así que yo lo que hice fue crear un div, con los requisitos que vienen en la documentación (position relative, altura definida y overflow-y scroll) Y así me funciona a la perfección.!
Para resolver el boton de menu para pantallas chicas, que deja de funcionar en con el scrollspy. Solo debes cambiar el data-target del botton (navbar-toggler).
originariamente es :
data-target="#navbarSupportedContent"
y lo pasamos a => data-target="#navbar", que es como lo deja sacha.
“Bootstrap”, me parece fantástico cuando quieres mejorar o poner en práctica tu “UX, UI, IA,ID y User Research”. Es muy práctico, y no tienes que realizar demasiado código (obvio, para desarrollo más complejo, ya no vas a utilizarlo).
excelente explicación!!!
El profesor al cambiar el id del navbar a navbar hace que la barra desplegable en dispostivos pequeños deje de funcionar
gracias , exelente TAG , ScrollSpy
Empeze a usar bootstrap para crear la pagina de mi hermana con spring-boot como backend, al final del curso pondre el resultado 😄
Para que funcione el data-offset=‘57’ en la nueva version de bootstrap hay que añadir data-bs-offset=‘57’
Personalmente creo que es una buena idea estandarizar los ID, no mezclar idiomas.
Mi Resultado:
Muy buen curso.
Buena clase.
En mi caso no me funcionó la clase sticky-top, en su lugar utilice la clase fixed-top
Scrollspy, una buena forma de guia y de estetica.
Me gusto mucho en particular esta clase
Bootstrap nos brinda una facilidad a la hora de hacer nuestros desarrollos muy buena!
Buenísima la clase
Hola ! me gustaría saber como se hace para que el nav-header de un sitio con varias páginas internas detecte en cual se encuentra el usuario, esto se puede hacer con Bootstrap ?
hice de todo pero el primer ítem del menú, osea es de la conferencia no se me ilumina, alguna solución??
Alguien sabe alguna forma de que cuando le des click, no te lleve un poco mas abajo? Hay una solucion en los comentarios, pero esta no me sirvio
genial esto lo hacia a mano antes jajajajaja
Scrollspy ayuda a navegar en el sitio, de esta forma el usuario sabe en que lugar esta.
Al hacer scroll hacia abajo: más o menos se iluminan los links en el momento correcto.
Al hacer scroll hacia arriba: está completamente descompensado.
Y la “La conferencia” se me mantiene tooodo el tiempo iluminada.
Muy bueno !!!
Excelente, investigare como suavizar un poco el scroll cuando te lleva a sección…
Esta fantastica esta funcionalidad que nos provee bootstrap de forma tan sencilla. Con tan solo agregar algunos atributos obtenemos un efecto en nuestra UI muy bueno.
es muy util esto
Perfecto!
UYYY ESA NO ME LA SABIA , EXCELENTE 😄
A los que usen BT5 y no les funcione el sticky-top, solo deben asignarlo en el <header class=“sticky-top”></header>
Que genial eso del offset y el scroll spy antes lo hacia de forma manual
Super!!!
Genial,Es una excelente herramienta
Excelente, scrollspy evita muchos dolores de cabeza. Gracias.
Genial 😄
Agrega muy buena estética a nuestro sitio. Buen elemento.
Take it easy!
en bootstrap 5 la sintaxis del scrollspy para el body es:
data-bs-spy="scroll" data-bs-target="#navbar"```
He realizado tos os cambios mencionados aqui en los aportes y nada me ha funcionado con respecto al menú hamburguesa
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Scrollspy: para conocer la ubicacion del usuario dentro del sitio para hacer mas intuitiva la experiencia y navegacion dentro de la pagina.
Tengan cuidado al cambiar el nombre del id del navbar, ya que ese así está siendo usado por el botón del menú cuando se ve la página en dispositivos más chicos.
gracias !!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?