in English

Scrollspy

Mettez automatiquement à jour la navigation Bootstrap ou répertoriez les composants de groupe en fonction de la position de défilement pour indiquer quel lien est actuellement actif dans la fenêtre d'affichage.

Comment ça fonctionne

Scrollspy a quelques exigences pour fonctionner correctement :

  • Si vous construisez notre JavaScript à partir de la source, cela nécessiteutil.js .
  • Il doit être utilisé sur un composant de navigation Bootstrap ou un groupe de listes .
  • Scrollspy requiert position: relative;l'élément que vous espionnez, généralement le fichier <body>.
  • Lorsque vous espionnez des éléments autres que le <body>, assurez-vous d'avoir un heightensemble et overflow-y: scroll;appliqué.
  • Les ancres ( <a>) sont obligatoires et doivent pointer vers un élément avec cela id.

Une fois mis en œuvre avec succès, votre groupe de navigation ou de liste sera mis à jour en conséquence, déplaçant la .activeclasse d'un élément à l'autre en fonction de leurs cibles associées.

Exemple dans la barre de navigation

Faites défiler la zone sous la barre de navigation et regardez la classe active changer. Les éléments de la liste déroulante seront également mis en surbrillance.

@gros

Contenu de l'espace réservé pour l'exemple scrollspy. Vous avez la meilleure architecture. Timbres de passeport, elle est cosmopolite. Fin, frais, féroce, nous l'avons sous clé. Je n'avais jamais prévu qu'un jour je te perdrais. Elle te ronge le coeur. Ton baiser est cosmique, chaque mouvement est magique. Je veux dire ceux, je veux dire comme si c'était elle. Salutations proches, partons en voyage. Posséder la nuit comme le 4 juillet ! Mais vous préférez vous perdre.

@mdo

Contenu de l'espace réservé pour l'exemple scrollspy. Parce qu'elle est la muse et l'artiste. (C'est comme ça qu'on fait) Alors tu veux jouer avec la magie. Alors sois sûr avant de tout me donner. Je marche, je marche dans les airs (ce soir). Passer la conversation, tout entendre, il est temps de faire le tour.

une

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

Contenu de l'espace réservé pour l'exemple scrollspy. Si tu veux danser, si tu veux tout, tu sais que je suis la fille que tu devrais appeler. Traverser la tempête, je le ferais. Alors laisse-moi te mettre dans ton costume d'anniversaire. Celui qui est parti. Vendredi soir dernier, ouais je pense qu'on a enfreint la loi, on dit toujours qu'on va arrêter. Parce qu'elle est un peu Yoko, et elle est un peu 'Oh non'. Je veux que la mâchoire tombe, que les yeux sautent, que la tête tourne, que le corps choque. Ouais, on a maximisé nos cartes de crédit et on s'est fait virer du bar.

Et un peu plus de contenu fictif, pour faire bonne mesure.

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

Exemple avec navigation imbriquée

Scrollspy fonctionne également avec les .navs imbriqués. Si un imbriqué .navest .active, ses parents le seront également .active. Faites défiler la zone à côté de la barre de navigation et regardez la classe active changer.

Objet 1

Contenu de l'espace réservé pour l'exemple scrollspy. Celui-ci se rapporte au point 1. Vous emmène à des kilomètres, si haut, parce qu'elle a ce sourire international. Il y a un étranger dans mon lit, il y a un martèlement dans ma tête. Oh non. Dans une autre vie je te ferais rester. Parce que je, je suis capable de tout. Se préparer pour ma bataille de couronnement. Utilisé pour voler l'alcool de vos parents et grimper sur le toit. Tonique, bronzé en forme et prêt, augmentez-le car il devient lourd. Son amour est comme une drogue. Je suppose que j'avais oublié que j'avais le choix.

Point 1-1

Contenu de l'espace réservé pour l'exemple scrollspy. Celui-ci concerne le point 1-1. Vous avez la meilleure architecture. Timbres de passeport, elle est cosmopolite. Fin, frais, féroce, nous l'avons sous clé. Je n'avais jamais prévu qu'un jour je te perdrais. Elle te ronge le coeur. Ton baiser est cosmique, chaque mouvement est magique. Je veux dire ceux, je veux dire comme si c'était elle. Salutations proches, partons en voyage. Posséder la nuit comme le 4 juillet ! Mais vous préférez vous perdre.

Article 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

Contenu de l'espace réservé pour l'exemple scrollspy. Celui-ci concerne le point 3-2. Vous êtes original, ne peut pas être remplacé. Toute la nuit, ils jouent, ta chanson. Filles de Californie, nous sommes indéniables. Comme un oiseau sans cage. Il n'y a plus de peur maintenant, lâchez prise et soyez simplement libre, je vous aimerai inconditionnellement. Je peux voir l'écriture sur le mur. Vous pourriez parcourir le monde, mais rien ne se rapproche de la côte dorée.

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

Exemple avec list-group

Scrollspy fonctionne également avec .list-groups. Faites défiler la zone à côté du groupe de la liste et regardez la classe active changer.

Objet 1

Contenu de l'espace réservé pour l'exemple de groupe de listes scrollspy. Celui-ci se rapporte au point 1. Pas besoin d'excuses. Il n'y a plus de peur maintenant, lâchez prise et soyez simplement libre, je vous aimerai inconditionnellement. Vendredi soir dernier. Ne soyez pas un gars un peu timide, je parie que c'est beau. L'été après le lycée quand nous nous sommes rencontrés pour la première fois. Parce qu'elle est la muse et l'artiste. Quoi? Attendre. Je pensais que j'étais l'exception.

Point 2

Contenu de l'espace réservé pour l'exemple de groupe de listes scrollspy. Celui-ci se rapporte au point 2. Ouais, elle danse à son propre rythme. Oh non. Tu aurais pu être le plus grand. 'Parce que bébé tu es un feu d'artifice. Peut-être une raison pour laquelle toutes les portes sont fermées. Ouvrez votre cœur et laissez-le commencer. So très chic, ouais, c'est un classique.

Point 3

Contenu de l'espace réservé pour l'exemple de groupe de listes scrollspy. Celui-ci se rapporte au point 3. Nous allons de plus en plus haut. Jamais l'un sans l'autre, nous avons fait un pacte. Je marche dans les airs. Quelqu'un a dit que vous vous étiez fait enlever votre tatouage. Maintenant, je flotte comme un papillon. Tonique, bronzé en forme et prêt, augmentez-le car il devient lourd. Parce qu'une fois que tu es à moi, une fois que tu es à moi. Tu dois juste allumer la lumière et la laisser briller ! Nous avons donc pris le boulevard. Vous êtes-vous déjà senti, senti si fin comme du papier. Je vois tout, je le vois maintenant.

Point 4

Contenu de l'espace réservé pour l'exemple de groupe de listes scrollspy. Celui-ci se rapporte au point 4. L'été après le lycée lorsque nous nous sommes rencontrés pour la première fois. Il n'y a plus de peur maintenant, lâchez prise et soyez simplement libre, je vous aimerai inconditionnellement. Une peau bronzée si chaude que nous ferons fondre votre popsicle. Cet amour vous fera léviter.

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

Usage

Via les attributs de données

Pour ajouter facilement un comportement scrollspy à votre navigation dans la barre supérieure, ajoutez data-spy="scroll"à l'élément que vous souhaitez espionner (le plus souvent, ce serait le <body>). Ajoutez ensuite l' data-targetattribut avec l'ID ou la classe de l'élément parent de n'importe quel .navcomposant 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>

Via Javascript

Après avoir ajouté position: relative;votre CSS, appelez le scrollspy via JavaScript :

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

Cibles d'ID résolubles requises

Les liens de la barre de navigation doivent avoir des cibles d'ID résolubles. Par exemple, un <a href="#home">home</a>doit correspondre à quelque chose dans le DOM comme <div id="home"></div>.

Éléments non :visibleciblés ignorés

Les éléments cibles qui ne sont pas :visibleconformes à jQuery seront ignorés et leurs éléments de navigation correspondants ne seront jamais mis en surbrillance.

Méthodes

.scrollspy('refresh')

Lorsque vous utilisez scrollspy en conjonction avec l'ajout ou la suppression d'éléments du DOM, vous devrez appeler la méthode refresh comme ceci :

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

.scrollspy('dispose')

Détruit le scrollspy d'un élément.

Choix

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-, comme dans data-offset="".

Nom Taper Défaut La description
décalage Numéro dix Pixels à décaler du haut lors du calcul de la position du défilement.
méthode chaîne de caractères auto Trouve dans quelle section se trouve l'élément espionné. autochoisira la meilleure méthode pour obtenir les coordonnées de défilement. offsetutilisera la méthode de décalage jQuery pour obtenir les coordonnées de défilement. positionutilisera la méthode de position jQuery pour obtenir les coordonnées de défilement.
cible chaîne | Objet jQuery | élément DOM Spécifie l'élément pour appliquer le plugin Scrollspy.

Événements

Type d'événement La description
activer.bs.scrollspy Cet événement se déclenche sur l'élément de défilement chaque fois qu'un nouvel élément est activé par le scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})