in English

Desplazamiento

Actualice automáticamente la navegación de Bootstrap o enumere los componentes del grupo en función de la posición de desplazamiento para indicar qué enlace está actualmente activo en la ventana gráfica.

Cómo funciona

Scrollspy tiene algunos requisitos para funcionar correctamente:

  • Si está compilando nuestro JavaScript desde la fuente, requiereutil.js .
  • Debe usarse en un componente de navegación Bootstrap o en un grupo de listas .
  • Scrollspy requiere position: relative;el elemento que está espiando, generalmente el archivo <body>.
  • Al espiar elementos que no sean el <body>, asegúrese de tener un heightconjunto y overflow-y: scroll;aplicarlo.
  • Los anclas ( <a>) son obligatorios y deben apuntar a un elemento con eso id.

Cuando se implemente con éxito, su grupo de navegación o lista se actualizará en consecuencia, moviendo la .activeclase de un elemento al siguiente en función de sus objetivos asociados.

Ejemplo en la barra de navegación

Desplácese por el área debajo de la barra de navegación y observe cómo cambia la clase activa. Los elementos desplegables también se resaltarán.

@grasa

Contenido de marcador de posición para el ejemplo de scrollspy. Tienes la mejor arquitectura. Sellos de pasaporte, ella es cosmopolita. Fino, fresco, feroz, lo tenemos en la cerradura. Nunca planeé que algún día te perdería. Ella te come el corazón. Tu beso es cósmico, cada movimiento es mágico. Me refiero a los, me refiero a que ella es la única. Saludos amados, hagamos un viaje. ¡Solo sé dueño de la noche como el 4 de julio! Pero prefieres emborracharte.

@mdo

Contenido de marcador de posición para el ejemplo de scrollspy. Porque ella es la musa y la artista. (Así es como lo hacemos) Así que quieres jugar con magia. Así que asegúrate antes de dármelo todo. Estoy caminando, estoy caminando en el aire (esta noche). Omita la conversación, lo escuché todo, es hora de caminar el camino.

una

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Contenido de marcador de posición para el ejemplo de scrollspy. Si quieres bailar, si lo quieres todo, sabes que soy la chica a la que debes llamar. Caminar a través de la tormenta lo haría. Así que déjame ponerte tu traje de cumpleaños. La que se escapó. El viernes pasado por la noche, sí, creo que violamos la ley, siempre decimos que vamos a parar. Porque ella es un poco de Yoko, y ella es un poco de 'Oh no'. Quiero que te quedes con la boca abierta, los ojos saltones, la cabeza girando, el cuerpo en shock. Sí, llegamos al límite de nuestras tarjetas de crédito y nos echaron del bar.

Y algo más de contenido de marcador de posición, por si acaso.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

Ejemplo con navegación anidada

Scrollspy también funciona con correos electrónicos anidados .nav. Si anidado .naves .active, sus padres también lo serán .active. Desplácese por el área junto a la barra de navegación y observe cómo cambia la clase activa.

Objeto 1

Contenido de marcador de posición para el ejemplo de scrollspy. Este se relaciona con el punto 1. Te lleva a kilómetros de altura, muy alto, porque tiene esa sonrisa internacional. Hay un extraño en mi cama, hay un latido en mi cabeza. Oh, no. En otra vida te haría quedar. Porque yo, soy capaz de cualquier cosa. Preparándome para mi batalla final. Solía ​​robar el licor de tus padres y subir al techo. Tonifica, broncea y listo, súbelo porque se está poniendo pesado. Su amor es como una droga. Supongo que olvidé que tenía una opción.

Artículo 1-1

Contenido de marcador de posición para el ejemplo de scrollspy. Éste se relaciona con el ítem 1-1. Tienes la mejor arquitectura. Sellos de pasaporte, ella es cosmopolita. Fino, fresco, feroz, lo tenemos en la cerradura. Nunca planeé que algún día te perdería. Ella te come el corazón. Tu beso es cósmico, cada movimiento es mágico. Me refiero a los, me refiero a que ella es la única. Saludos amados, hagamos un viaje. ¡Solo sé dueño de la noche como el 4 de julio! Pero prefieres emborracharte.

Artículo 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

Contenido de marcador de posición para el ejemplo de scrollspy. Este se relaciona con el ítem 3-2. Eres original, no se puede reemplazar. Toda la noche están tocando, tu canción. Chicas de California somos innegables. Como un pájaro sin jaula. No hay miedo ahora, déjate llevar y sé libre, te amaré incondicionalmente. Puedo ver la escritura en la pared. Podrías viajar por el mundo, pero nada se acerca a la costa dorada.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Ejemplo con grupo de lista

Scrollspy también funciona con .list-groups. Desplácese por el área junto al grupo de listas y observe cómo cambia la clase activa.

Objeto 1

Contenido de marcador de posición para el ejemplo de grupo de lista scrollspy. Este se relaciona con el punto 1. No necesito disculpas. No hay miedo ahora, déjate llevar y sé libre, te amaré incondicionalmente. El pasado viernes por la noche. No seas un tipo tímido, apuesto a que es hermoso. Verano después de la escuela secundaria cuando nos conocimos. Porque ella es la musa y la artista. ¿Qué? Esperar. Pensé que yo era la excepción.

Artículo 2

Contenido de marcador de posición para el ejemplo de grupo de lista scrollspy. Este se relaciona con el punto 2. Sí, ella baila a su propio ritmo. Oh, no. Podrías haber sido el más grande. 'Porque, cariño, eres un fuego artificial. Tal vez una razón por la que todas las puertas están cerradas. Abre tu corazón y deja que comience. Así que très chic, sí, es un clásico.

artículo 3

Contenido de marcador de posición para el ejemplo de grupo de lista scrollspy. Este se relaciona con el punto 3. Vamos más y más alto. Nunca uno sin el otro, hicimos un pacto. Estoy caminando en el aire. Alguien dijo que te quitaron el tatuaje. Ahora estoy flotando como una mariposa. Tonifica, broncea y listo, súbelo porque se está poniendo pesado. Porque una vez que seas mía, una vez que seas mía. ¡Solo tienes que encender la luz y dejar que brille! Así que llegamos al bulevar. ¿Alguna vez te sientes, te sientes tan delgado como el papel? Lo veo todo, lo veo ahora.

Artículo 4

Contenido de marcador de posición para el ejemplo de grupo de lista scrollspy. Este se relaciona con el punto 4. Verano después de la escuela secundaria cuando nos conocimos. No hay miedo ahora, déjate llevar y sé libre, te amaré incondicionalmente. Piel besada por el sol tan caliente que derretiremos tu paleta. Este amor te hará levitar.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

Uso

A través de atributos de datos

Para agregar fácilmente el comportamiento de scrollspy a la navegación de la barra superior, agregue data-spy="scroll"el elemento que desea espiar (por lo general, este sería el <body>). Luego agregue el data-targetatributo con el ID o la clase del elemento principal de cualquier .navcomponente de Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

A través de JavaScript

Después de agregar position: relative;su CSS, llame a scrollspy a través de JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Se requieren objetivos de ID resolubles

Los enlaces de la barra de navegación deben tener objetivos de identificación resolubles. Por ejemplo, <a href="#home">home</a>debe corresponder a algo en el DOM como <div id="home"></div>.

Elementos no :visibleobjetivo ignorados

Los elementos de destino que no estén :visiblede acuerdo con jQuery se ignorarán y sus elementos de navegación correspondientes nunca se resaltarán.

Métodos

.scrollspy('refresh')

Cuando use scrollspy junto con la adición o eliminación de elementos del DOM, deberá llamar al método de actualización de la siguiente manera:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

Destruye el scrollspy de un elemento.

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-offset="".

Nombre Escribe Defecto Descripción
compensar número 10 Píxeles para compensar desde la parte superior al calcular la posición de desplazamiento.
método cuerda auto Encuentra en qué sección se encuentra el elemento espiado. autoElegirá el mejor método para obtener las coordenadas de desplazamiento. offsetutilizará el método de compensación de jQuery para obtener las coordenadas de desplazamiento. positionutilizará el método de posición de jQuery para obtener las coordenadas de desplazamiento.
objetivo cadena | objeto jQuery | elemento DOM Especifica el elemento para aplicar el complemento Scrollspy.

Eventos

Tipo de evento Descripción
activar.bs.scrollspy Este evento se activa en el elemento de desplazamiento cada vez que el scrollspy activa un nuevo elemento. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})