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

Resumen

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/

Wandy Rafael Santana Evangelista

student•

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

Deivi Willy Herrera Rodas

student•

Excelente aporte

Harold David Avila Sabogal

student•

muchas gracias

Andrés Leonardo Baldárrago Gastulo

student•

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>

Sergio Bernal

student•

Muchas gracias

Water Oscar Dona

student•

MUCHAS GRACIAS!

Nicolas ortiz suarez

student•

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

Cesar Sadrak Martin Moreno

student•

Con razón no me funcionaba jaja

Andrés Felipe Sandoval Higuera

student•

Gracias amigo, no me estaba resaltando los enlaces del navbar por eso :D

Enrique Garcia Stave

student•

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.

Ivan Mendez

student•

muy bueno

Edgardo Marcano

student•

Excelente mil gracias

Gonzalo Pimentel

student•

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!

Jefferson Andres Espejo Goez

student•

Gracias!

Fredy Frasser

student•

No me había fijado en ese detalle, gracias.

Alex Milano

student•

El "sticky-top" lo cambiaron en la versión 4.1 por el "fixed-top", solo actualicen eso y debería funcionar.

David Alejandro Mosquera Moreno

student•

¡Gracias!

HUGO ANDRES DIAZ BERNAL

student•

Excelente apunte, gracias Alex

Armando Chindoy

student•

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.

Jorge A. Torres

student•

Muchas gracias, esto fue lo que me solucionó.

Nicolas Velasco

student•

Hermano muchas gracias, casi no le atino con el problema

Camilo Andrés Pérez Galeano

student•

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

Luis Eduardo Rodríguez Ramírez

student•

Creo que es

<body data-bs-spy="scroll" data-bs-target="navbar">

Adriana Joali Rebollar Cid

student•

si es <body data-bs-spy="scroll" data-target="navbar"> gracias :3

Eduardo Cárdenas

student•

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:

Jesus Gallardo

student•

Puedes cambiar el id igual que en el video, solo debes ir a donde esta tu button de menu hamburguesa, y cambiarle el atributo data-target Alli debes poner el id que hayas escogido para tu navbar.

<button class="menu-hamburguesa" data-target="#navbar"> </button>```

Isaí Ramírez

student•

El minuto 2:37 se repite con el minuto 3:08 o se me afiguro??

Isaí Ramírez

student•

Casi al final del video se vuelve a repetir el video, cuando empieza a hablar de sticky-top

Juan C Felizzola

student•

Estos reportes puedes hacerlo en la parte que dice “Reportar problema” debajo del vídeo, para no tener que agregarlo en la parte de comentarios del vídeo.

Andrés David Loaiza Zamudio

student•

Me tocó cambiar el sticky -top por fixed-top para que se pegara el menú, a alguien mas le paso así??

Jorge A. Torres

student•

Si, esto fue lo que me funcionó, muchas gracias.

johan sebastian guerrero valdes

student•

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

Christian David Sánchez

student•

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.

Eliana Huamani

student•

USE this fixed-top instead of sticky-top , the latter doenst work.

Franklin Roldan

student•

En un punto me dejo de funcionar el menu en responsive…Alguna idea de porque pasa esto

Diego Forero

Team Platzi•

Puede ser un error de digitación, revisa la consola del navegador en busca de errores.

Franklin Roldan

student•

ehy me pude a revisar que era lo que pasaba y pues bien si terminas el curso te darás cuenta de la sorpresa porque no funcionaba el menú, gracias por tu comentario

David Dzul

student•

Scroll-spy … el cliente siempre lo quiere jeje

Bryan Estiven Silva Mercado

student•

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

Luis Andrés Arce Cárdenas

student•

Si tienes todo el nav envuelto en la etiqueta header, aplicale al header el sticky-top.

Santiago Gomez Florez

student•

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

Karla

student•

El sticky-top lo coloqué en el header y funcionó.

David Ernesto Fernández Guevara

student•

A mi tambien, solo ahi me funcionó

Miguel Angel Jardinez Ramos

student•

a mi no me funciono el Sticky D:

Diego Forero

Team Platzi•

Este es un comentario que dejo @wandysnt 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

Luis Andrés Arce Cárdenas

student•

Si tu nav esta envuelto en un header, al header aplicale el sticky-top. Psdt.: Si se usa, revisen la documentación, solo que no es soportado en todos los navegadores.

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

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