CursosEmpresasBlogLiveConfPrecios

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

Clase 17 de 21 • Curso de Bootstrap 4

Contenido del curso

Introducción al curso

  • 1
    Repositorio del curso de bootstrap

    Repositorio del curso de bootstrap

    00:15 min
  • 2
    Bootstrap 4 ¿Qué trae de nuevo esta versión?

    Bootstrap 4 ¿Qué trae de nuevo esta versión?

    03:23 min
  • 3
    ¿Que es un framework de frontend?

    ¿Que es un framework de frontend?

    02:45 min
  • 4
    Nuestro Proyecto: Hola Mundo de Bootstrap

    Nuestro Proyecto: Hola Mundo de Bootstrap

    02:34 min

Creando el sitio web

  • 5
    La grilla de Bootstrap

    La grilla de Bootstrap

    12:09 min
  • 6
    Reto: La grilla de Bootstrap

    Reto: La grilla de Bootstrap

    05:43 min
  • 7
    El footer

    El footer

    10:38 min
  • 8
    El header de nuestro sitio

    El header de nuestro sitio

    13:18 min
  • 9
    Creando un carousel de imágenes

    Creando un carousel de imágenes

    07:58 min
  • 10
    Agregando texto informativo del evento

    Agregando texto informativo del evento

    12:51 min
  • 11
    Agregando botones

    Agregando botones

    04:42 min
  • 12
    Las cards de Bootstrap 4

    Las cards de Bootstrap 4

    11:44 min
  • 13
    Pastillas de texto

    Pastillas de texto

    04:38 min
  • 14
    Agregando un contenedor de ancho completo

    Agregando un contenedor de ancho completo

    12:26 min
  • 15
    Los formularios de Bootstrap 4

    Los formularios de Bootstrap 4

    15:43 min
  • 16
    Agregando un tooltip

    Agregando un tooltip

    04:07 min
  • 17
    Scrollspy: Conociendo la ubicación del usuario en el header

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

    Viendo ahora
  • 18
    Agregando un modal para comprar tickets

    Agregando un modal para comprar tickets

    04:47 min
  • 19
    Un nuevo formulario para completar la compra

    Un nuevo formulario para completar la compra

    04:40 min

Deploy a producción

  • 20
    Poniendo nuestro sitio en producción

    Poniendo nuestro sitio en producción

    04:08 min
  • 21
    Conclusiones del curso

    Conclusiones del curso

    00:51 min
Tomar examen
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/

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

      Comentarios

      Wandy Rafael Santana Evangelista

      Wandy Rafael Santana Evangelista

      student•
      hace 7 años
        Deivi Willy Herrera Rodas

        Deivi Willy Herrera Rodas

        student•
        hace 7 años
        Harold David Avila Sabogal

        Harold David Avila Sabogal

        student•
        hace 7 años
      Andrés Leonardo Baldárrago Gastulo

      Andrés Leonardo Baldárrago Gastulo

      student•
      hace 7 años
        Sergio Bernal

        Sergio Bernal

        student•
        hace 7 años
        Water Oscar Dona

        Water Oscar Dona

        student•
        hace 7 años
      Nicolas ortiz suarez

      Nicolas ortiz suarez

      student•
      hace 5 años
        Cesar Sadrak Martin Moreno

        Cesar Sadrak Martin Moreno

        student•
        hace 5 años
        Andrés Felipe Sandoval Higuera

        Andrés Felipe Sandoval Higuera

        student•
        hace 4 años
      Enrique Garcia Stave

      Enrique Garcia Stave

      student•
      hace 7 años
        Ivan Mendez

        Ivan Mendez

        student•
        hace 7 años
        Edgardo Marcano

        Edgardo Marcano

        student•
        hace 6 años
      Gonzalo Pimentel

      Gonzalo Pimentel

      student•
      hace 6 años
        Jefferson Andres Espejo Goez

        Jefferson Andres Espejo Goez

        student•
        hace 6 años
        Fredy Frasser

        Fredy Frasser

        student•
        hace 5 años
      Alex Milano

      Alex Milano

      student•
      hace 7 años
        David Alejandro Mosquera Moreno

        David Alejandro Mosquera Moreno

        student•
        hace 7 años
        HUGO ANDRES DIAZ BERNAL

        HUGO ANDRES DIAZ BERNAL

        student•
        hace 6 años
      Armando Chindoy

      Armando Chindoy

      student•
      hace 5 años
        Jorge A. Torres

        Jorge A. Torres

        student•
        hace 5 años
        Nicolas Velasco

        Nicolas Velasco

        student•
        hace 3 años
      Camilo Andrés Pérez Galeano

      Camilo Andrés Pérez Galeano

      student•
      hace 5 años
        Luis Eduardo Rodríguez Ramírez

        Luis Eduardo Rodríguez Ramírez

        student•
        hace 5 años
        Adriana Joali Rebollar Cid

        Adriana Joali Rebollar Cid

        student•
        hace 5 años
      Eduardo Cárdenas

      Eduardo Cárdenas

      student•
      hace 7 años
        Jesus Gallardo

        Jesus Gallardo

        student•
        hace 7 años
      Isaí Ramírez

      Isaí Ramírez

      student•
      hace 8 años
        Isaí Ramírez

        Isaí Ramírez

        student•
        hace 8 años
        Juan C Felizzola

        Juan C Felizzola

        student•
        hace 8 años
      Andrés David Loaiza Zamudio

      Andrés David Loaiza Zamudio

      student•
      hace 5 años
        Jorge A. Torres

        Jorge A. Torres

        student•
        hace 5 años
      johan sebastian guerrero valdes

      johan sebastian guerrero valdes

      student•
      hace 5 años
      Christian David Sánchez

      Christian David Sánchez

      student•
      hace 7 años
      Eliana Huamani

      Eliana Huamani

      student•
      hace 6 años
      Franklin Roldan

      Franklin Roldan

      student•
      hace 8 años
        Diego Forero

        Diego Forero

        Team Platzi•
        hace 8 años
        Franklin Roldan

        Franklin Roldan

        student•
        hace 8 años
      David Dzul

      David Dzul

      student•
      hace 8 años
      Bryan Estiven Silva Mercado

      Bryan Estiven Silva Mercado

      student•
      hace 7 años
        Luis Andrés Arce Cárdenas

        Luis Andrés Arce Cárdenas

        student•
        hace 7 años
      Santiago Gomez Florez

      Santiago Gomez Florez

      student•
      hace 6 años
      Karla

      Karla

      student•
      hace 6 años
        David Ernesto Fernández Guevara

        David Ernesto Fernández Guevara

        student•
        hace 6 años
      Miguel Angel Jardinez Ramos

      Miguel Angel Jardinez Ramos

      student•
      hace 7 años
        Diego Forero

        Diego Forero

        Team Platzi•
        hace 7 años
        Luis Andrés Arce Cárdenas

        Luis Andrés Arce Cárdenas

        student•
        hace 7 años

      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

      Excelente aporte

      muchas gracias

      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>

      Muchas gracias

      MUCHAS GRACIAS!

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

      Con razón no me funcionaba jaja

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

      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.

      muy bueno

      Excelente mil gracias

      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!

      Screenshot at 15-56-00.png

      Gracias!

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

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

      ¡Gracias!

      Excelente apunte, gracias Alex

      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.

      Muchas gracias, esto fue lo que me solucionó.

      Hermano muchas gracias, casi no le atino con el problema

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

      Creo que es

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

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

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

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

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

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

      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.

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

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

      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.

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

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

      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

      Scroll-spy … el cliente siempre lo quiere jeje

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

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

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

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

      A mi tambien, solo ahi me funcionó

      a mi no me funciono el Sticky D:

      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

      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.