in English

Espião de rolagem

Atualize automaticamente a navegação do Bootstrap ou os componentes do grupo de lista com base na posição de rolagem para indicar qual link está atualmente ativo na viewport.

Como funciona

Scrollspy tem alguns requisitos para funcionar corretamente:

  • Se você estiver construindo nosso JavaScript a partir da fonte, ele requerutil.js .
  • Ele deve ser usado em um componente de navegação Bootstrap ou grupo de listas .
  • O Scrollspy requer position: relative;o elemento que você está espionando, geralmente o <body>.
  • Ao espionar outros elementos além do <body>, certifique-se de ter um heightconjunto e overflow-y: scroll;aplicado.
  • Âncoras ( <a>) são obrigatórias e devem apontar para um elemento com aquela id.

Quando implementado com sucesso, seu grupo de navegação ou lista será atualizado de acordo, movendo a .activeclasse de um item para o próximo com base em seus destinos associados.

Exemplo na barra de navegação

Role a área abaixo da barra de navegação e observe a mudança de classe ativa. Os itens suspensos também serão destacados.

@gordo

Conteúdo de espaço reservado para o exemplo scrollspy. Você tem a melhor arquitetura. Carimbos de passaporte, ela é cosmopolita. Bem, fresco, feroz, nós o fechamos. Nunca planejei que um dia eu estaria perdendo você. Ela come seu coração. Seu beijo é cósmico, cada movimento é mágico. Quero dizer, aqueles, quero dizer, como se ela fosse a única. Saudações entes queridos, vamos fazer uma viagem. Basta possuir a noite como o 4 de julho! Mas você prefere ficar bêbado.

@mdo

Conteúdo de espaço reservado para o exemplo scrollspy. Porque ela é a musa e a artista. (É assim que fazemos) Então você quer brincar com magia. Então, certifique-se antes de dar tudo para mim. Estou andando, estou andando no ar (esta noite). Pule a conversa, ouvi tudo, hora de andar a pé.

1

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

Conteúdo de espaço reservado para o exemplo scrollspy. Se você quer dançar, se você quer tudo, você sabe que eu sou a garota que você deveria ligar. Andar pela tempestade que eu faria. Então deixe-me colocar você em seu terno de aniversário. Aquele que partiu. Na última sexta à noite, sim, acho que infringimos a lei, sempre digo que vamos parar. Porque ela é um pouco Yoko, e ela é um pouco 'Oh não'. Eu quero o queixo caindo, olhos arregalados, cabeça girando, corpo chocando. Sim, estouramos nossos cartões de crédito e fomos expulsos do bar.

E mais algum conteúdo de espaço reservado, para uma boa medida.

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

Exemplo com navegação aninhada

Scrollspy também funciona com .navs aninhados. Se um aninhado .navfor .active, seus pais também serão .active. Role a área ao lado da barra de navegação e observe a mudança de classe ativa.

Item 1

Conteúdo de espaço reservado para o exemplo scrollspy. Esta se relaciona com o item 1. Leva você a milhas de altura, tão alto, porque ela tem aquele sorriso internacional. Há um estranho na minha cama, há um latejar na minha cabeça. Oh não. Em outra vida eu faria você ficar. Porque eu, eu sou capaz de qualquer coisa. Preparando-se para minha batalha de coroação. Costumava roubar a bebida dos seus pais e subir no telhado. Tom, bronzeado e pronto, aumente porque está ficando pesado. Seu amor é como uma droga. Acho que esqueci que tinha escolha.

Item 1-1

Conteúdo de espaço reservado para o exemplo scrollspy. Este refere-se ao item 1-1. Você tem a melhor arquitetura. Carimbos de passaporte, ela é cosmopolita. Bem, fresco, feroz, nós o fechamos. Nunca planejei que um dia eu estaria perdendo você. Ela come seu coração. Seu beijo é cósmico, cada movimento é mágico. Quero dizer, aqueles, quero dizer, como se ela fosse a única. Saudações entes queridos, vamos fazer uma viagem. Basta possuir a noite como o 4 de julho! Mas você prefere ficar bêbado.

Item 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

Conteúdo de espaço reservado para o exemplo scrollspy. Este refere-se ao item 3-2. Você é original, não pode ser substituído. A noite toda eles estão tocando, sua música. Garotas da Califórnia, somos inegáveis. Como um pássaro sem gaiola. Não há medo agora, deixe ir e apenas seja livre, eu vou te amar incondicionalmente. Eu posso ver a escrita na parede. Você pode viajar pelo mundo, mas nada chega perto da costa dourada.

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

Exemplo com grupo de listas

Scrollspy também funciona com .list-groups. Role a área ao lado do grupo de lista e observe a mudança de classe ativa.

Item 1

Conteúdo de espaço reservado para o exemplo de grupo de listas scrollspy. Este está relacionado ao item 1. Não precisa de desculpas. Não há medo agora, deixe ir e apenas seja livre, eu vou te amar incondicionalmente. Última sexta à noite. Não seja um cara meio tímido, aposto que é lindo. Verão depois do ensino médio, quando nos conhecemos. Porque ela é a musa e a artista. O que? Espere. Pensava que eu era a exceção.

Item 2

Conteúdo de espaço reservado para o exemplo de grupo de listas scrollspy. Este está relacionado com o item 2. Sim, ela dança ao seu próprio ritmo. Oh não. Você poderia ter sido o maior. 'Porque querido voce é um fogo de artificio. Talvez uma razão pela qual todas as portas estão fechadas. Abra seu coração e deixe-o começar. Tão très chic, sim, ela é um clássico.

Item 3

Conteúdo de espaço reservado para o exemplo de grupo de listas scrollspy. Este está relacionado com o item 3. Subimos cada vez mais alto. Nunca um sem o outro, fizemos um pacto. Eu estou caminhando no ar. Alguém disse que você removeu sua tatuagem. Agora estou flutuando como uma borboleta. Tom, bronzeado e pronto, aumente porque está ficando pesado. Porque uma vez que você é meu, uma vez que você é meu. Você só precisa acender a luz e deixá-la brilhar! Então chegamos ao bulevar. Você já se sentiu, se sentiu tão fino como papel. Eu vejo tudo, eu vejo agora.

Item 4

Conteúdo de espaço reservado para o exemplo de grupo de listas scrollspy. Este está relacionado ao item 4. Verão depois do ensino médio, quando nos conhecemos. Não há medo agora, deixe ir e apenas seja livre, eu vou te amar incondicionalmente. Pele bronzeada tão quente que vamos derreter seu picolé. Esse amor vai fazer você 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

Por atributos de dados

Para adicionar facilmente o comportamento do scrollspy à sua navegação na barra superior, adicione data-spy="scroll"ao elemento que você deseja espionar (geralmente, isso seria o <body>). Em seguida, adicione o data-targetatributo com o ID ou classe do elemento pai de qualquer .navcomponente do 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>

Por JavaScript

Depois position: relative;de adicionar seu CSS, chame o scrollspy via JavaScript:

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

Destinos de ID resolúvel obrigatórios

Os links da barra de navegação devem ter destinos de ID que podem ser resolvidos. Por exemplo, a <a href="#home">home</a>deve corresponder a algo no DOM como <div id="home"></div>.

Elementos não :visiblesegmentados ignorados

Elementos de destino que não estão :visiblede acordo com jQuery serão ignorados e seus itens de navegação correspondentes nunca serão destacados.

Métodos

.scrollspy('refresh')

Ao usar o scrollspy em conjunto com a adição ou remoção de elementos do DOM, você precisará chamar o método de atualização da seguinte forma:

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

.scrollspy('dispose')

Destrói o scrollspy de um elemento.

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-offset="".

Nome Modelo Predefinição Descrição
Deslocamento número 10 Pixels para compensar a partir do topo ao calcular a posição de rolagem.
método corda auto Localiza em qual seção o elemento espiado está. autoescolherá o melhor método para obter as coordenadas de rolagem. offsetusará o método de deslocamento jQuery para obter as coordenadas de rolagem. positionusará o método de posição jQuery para obter as coordenadas de rolagem.
alvo seqüência | objeto jQuery | Elemento DOM Especifica o elemento para aplicar o plugin Scrollspy.

Eventos

Tipo de evento Descrição
ativar.bs.scrollspy Este evento é acionado no elemento scroll sempre que um novo item é ativado pelo scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})