TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear Bootstrap 5 Scrollspy?

3

Scrollspy es el nombre que indica la forma de rastrear o espiar la posición del contenido en función de la barra de desplazamiento del navegador. Aunque esto generalmente no es de mucha utilidad dentro del contenido, es una forma elegante de mostrar la barra de pastillas en movimiento en el menú de navegación. Especialmente en las plantillas de una sola página, tiene sentido resaltar el menú según la posición de la barra de desplazamiento. Bootstrap ofrece un componente predeterminado llamado scrollspy para este propósito. En este tutorial, exploremos más sobre la creación de scrollspy usando Bootstrap 5.

¿Cómo crear Bootstrap 5 Scrollspy?

Ejemplo de Bootstrap 4 Scrollspy

A continuación se muestran algunas de las necesidades y características básicas del componente scrollspy:

  • Scrollspy es un complemento de JavaScript, por lo tanto, debe incluir archivos de script Bootstrap para que funcione scrollspy.
  • Debe utilizar el componente de navegación para resaltar los enlaces.
  • Se resaltan los elementos individuales del menú y también los elementos del menú desplegable.
  • Debe usar "position: related;" para que el elemento a rastrear para que funcione el componente scrollspy.
  • Cuando se utiliza con elementos distintos del cuerpo del contenido (como sección o div), la altura y "overflow-y: scroll;" debe definirse exclusivamente.

Scrollspy se puede utilizar con la barra de navegación y los componentes de grupo de listas tanto en dirección horizontal como vertical. También se puede utilizar en una configuración de barra de navegación anidada. Creemos un scrollspy de ejemplo usando el componente navbar.

Crear barra de navegación

Como puede ver en la demostración, desplazarse por el contenido resaltará el elemento de menú correspondiente en la parte superior. Primero creemos un menú usando la barra de navegación y el componente de navegación como el siguiente código:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-warning" id="scrollspy"> <button class="navbar-toggler navbar-toggler-right" 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> <a class="navbar-brand" href="index.html"> <img src=" logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo"> Bootstrap 4 Demo Site</a> <ul class="nav nav-pills mr-auto ml-auto"> <li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li> <li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li> <li class="nav-item"><a class="nav-link" href="#section3">Section 3</a></li>   </ul> <!-- Start Search --> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> <!-- End Search --> </nav>

El primer paso es identificar la barra de navegación con una identificación única, en este caso hemos utilizado id = "scrollspy”. En segundo lugar, cada elemento de navegación debe estar vinculado con identificadores únicos. Aquí hemos utilizado “href = # section1”, “href = # section2” y “href = # section3” para rastrear tres elementos del menú.

Creación de contenido desplazable

Ahora la barra de navegación está lista con una identificación única junto con referencias de enlace únicas para cada elemento del menú. Creemos un elemento div que contenga tres secciones para rastrear los tres elementos del menú.

<div data-spy="scroll" data-target="#scrollspy" data-offset="0" style="overflow-y: scroll; height: 800px; position:relative;"> <section class="sec1"> <h4 id="section1">Section 1</h4> <p>Here is a content for section 1.</p> <p>"Here is your content for section 1. Enter long content for covering 800px height".</p></section> <section class="sec2"> <h4 id="section2">Section 2</h4> <p>Here is a content for section 2.</p> <p>"Here is your content for section 2. Enter long content for covering 800px height".</p> </section> <section class="sec3"> <h4 id="section3">Section 3</h4> <p>Here is a content for section 3.</p> <p>"Here is your content for section 3. Enter long content for covering 800px height".</p> </section> </div>

Para habilitar el espionaje de la barra de navegación, debe usar "data-target = # scrollspy". Aquí "#scrollspy" es la identificación de la barra de navegación. Hemos utilizado "overflow-y: scroll;" y definió la altura como 800px para mostrar la barra de desplazamiento en el nivel del elemento div. Dentro del elemento div principal, creemos tres secciones. Cada sección tiene un encabezado h4 con la identificación correspondiente a los identificadores de los elementos del menú. Por ejemplo, h4 de la sección 1 tiene "id = sección1" donde sección1 es la referencia de enlace para el elemento de menú "Sección 1".

Poniendo todo junto

Al juntar la barra de navegación y el elemento div en una plantilla de inicio de Bootstrap, se creará una página de desplazamiento simple.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More