No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Scrollspy: Conociendo la ubicaci贸n del usuario en el header

17/21
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 67

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

Hay un problema cuando se cambia el id del nav a 鈥渘avbar鈥 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 鈥榖s鈥 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 鈥渘avbar鈥.
    <div class="collapse navbar-collapse" id="navbar">

  • Debemos asignar a los atributos 鈥渉ref鈥 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 鈥渁ctive鈥 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=鈥渘avbarSupportedContent鈥 y lo hemos cambiado a 鈥渘avbar鈥, as铆 que cambiamos el data-target y el aria-controls a #navbar y navbar y listo!

El 鈥渟ticky-top鈥 lo cambiaron en la versi贸n 4.1 por el 鈥渇ixed-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=鈥渟croll鈥 data-target="#navbarSupportedContent" data-offset=鈥59鈥>

Ahora para la version v5.1.0 se usa casi igual, tienen que agregarle un -bs- en el medio, ejemplo data-bs-spy=鈥渟croll鈥 data-bs-target="#navbar-example2".

Me toc贸 cambiar el sticky -top por fixed-top para que se pegara el men煤, a alguien mas le paso as铆??

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.

Si gustan checar los modal de Sweetalert2, est谩n muy bonitos https://sweetalert2.github.io

al igual que ha @kevinbrayanluna
A mi no me funciono poniendo sticky-top, tuve que poner fixed-top!!

Para que funcione el Nav correctamente en pantallas peque帽as realizar 2 cambios mas.

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

Tambien se puede poner data-offset="0", y funcionara correctamente el scrollspy.

El sticky-top lo coloqu茅 en el header y funcion贸.

a mi no me funciono el Sticky D:

Para que funcione el men煤 hamburguesa debe coincidir el data-bs-target, aria-controls y el id del div que contiene los enlaces.

Personalmente creo que es una buena idea estandarizar los ID, no mezclar idiomas.

Para que funcione el data-offset=鈥57鈥 en la nueva version de bootstrap hay que a帽adir data-bs-offset=鈥57鈥

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.

El profesor al cambiar el id del navbar a navbar hace que la barra desplegable en dispostivos peque帽os deje de funcionar

Muy buen curso.

excelente explicaci贸n!!!

gracias , exelente TAG , ScrollSpy

鈥淏ootstrap鈥, me parece fant谩stico cuando quieres mejorar o poner en pr谩ctica tu 鈥淯X, 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).

Empeze a usar bootstrap para crear la pagina de mi hermana con spring-boot como backend, al final del curso pondre el resultado 馃槃

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 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>

Que genial eso del offset y el scroll spy antes lo hacia de forma manual

Scrollspy agregado correctamente al proyecto 馃
.
馃寪 C贸digo en GitHub: https://github.com/iJCode1/bootstrap4_platzi
.
Resultado:

hice de todo pero el primer 铆tem del men煤, osea es de la conferencia no se me ilumina, alguna soluci贸n??

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 ?

Buen铆sima la clase

Me gusto mucho en particular esta clase

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

Super!!!

Buena clase.

En mi caso no me funcion贸 la clase sticky-top, en su lugar utilice la clase fixed-top

Muy bueno !!!

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 鈥淟a conferencia鈥 se me mantiene tooodo el tiempo iluminada.

Genial,Es una excelente herramienta

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.

Excelente, investigare como suavizar un poco el scroll cuando te lleva a secci贸n鈥

Excelente, scrollspy evita muchos dolores de cabeza. Gracias.

es muy util esto

Genial 馃槃

Perfecto!

genial esto lo hacia a mano antes jajajajaja

Agrega muy buena est茅tica a nuestro sitio. Buen elemento.

Scrollspy ayuda a navegar en el sitio, de esta forma el usuario sabe en que lugar esta.

Bootstrap nos brinda una facilidad a la hora de hacer nuestros desarrollos muy buena!

Take it easy!

UYYY ESA NO ME LA SABIA , EXCELENTE 馃槃

Scrollspy, una buena forma de guia y de estetica.

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>

La nueva documentacion de Boostrap aui
https://getbootstrap.com/docs/5.0/components/scrollspy/

Buen d铆a a todos, en este enlace muestra las formas que se pueden trabajar con el posicionamiento en Bootstrap v5.0: https://getbootstrap.com/docs/5.0/helpers/position/#sticky-top
Espero que les sea de utilidad.

gracias !!

f

en bootstrap 5 la sintaxis del scrollspy para el body es:

 data-bs-spy="scroll" data-bs-target="#navbar"```

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.

Scrollspy: para conocer la ubicacion del usuario dentro del sitio para hacer mas intuitiva la experiencia y navegacion dentro de la pagina.