Derniers tutoriels de développement web
 

Bootstrap JS Scrollspy


JS Scrollspy (scrollspy.js)

Le plugin Scrollspy est utilisé pour mettre à jour automatiquement les liens dans une liste de navigation basé sur la position de défilement.

Pour un tutoriel sur Scrollspy, lisez notre Tutorial Scrollspy Bootstrap .

Astuce: Le plugin Scrollspy est souvent utilisé conjointement avec le Affix plugin.


Via data-* Attributs

Ajouter des data-spy="scroll" à l'élément qui doit être utilisé comme zone de défilement (souvent c'est le <body> élément).

Puis ajouter le data-target attribut avec une valeur de l'ID ou le nom de la classe de la barre de navigation ( .navbar ). Ceci est pour vous assurer que la navbar de navbar est relié à la zone de défilement.

Notez que les éléments défilants doivent correspondre à l'ID des liens à l' intérieur liste des éléments de la barre de navigation ( <div id="section1"> correspond à <a href="#section1"> ).

L'option de data-offset de data-offset attribut spécifie le nombre de pixels pour compenser de haut lors du calcul de la position de défilement. Ceci est utile lorsque vous vous sentez que les liens à l'intérieur de la barre de navigation change l'état actif trop tôt ou trop tôt lors d'un saut aux éléments défilants. Par défaut est de 10 pixels.

Nécessite un positionnement relatif: L'élément avec les data-spy="scroll" nécessite la CSS position de la propriété, avec une valeur de "relative" pour fonctionner correctement.

Exemple

<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
  <ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>

<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>
Essayez - le vous - même »

Via JavaScript

Activer manuellement:

Exemple

$('body').scrollspy({target: ".navbar"})
Essayez - le vous - même »

options de Scrollspy

Les options peuvent être transmises par l'intermédiaire des attributs de données ou JavaScript. Pour les attributs de données, ajouter le nom de l'option pour de données, comme dans les données offset = "".

prénom Type Défaut La description Essayez-le
offsetnumber10 Indique le nombre de pixels pour compenser de haut lors du calcul de la position de défilement Essayez - le

Méthodes Scrollspy

Le tableau suivant contient toutes les méthodes disponibles. Scrollspy

méthode La description Essayez-le
.scrollspy("refresh") Lors de l'ajout et la suppression des éléments de la scrollspy, cette méthode peut être utilisée pour actualiser le document Essayez - le

Evénements Scrollspy

Le tableau suivant répertorie les événements scrollspy tous disponibles.

un événement La description Essayez-le
activate.bs.scrollspy Survient quand un nouvel élément est activé par le scrollspy Essayez - le

Exemples

Exemples

Scrollspy avec défilement animé

Comment ajouter une page lisse défilement à une ancre sur la même page:

Le défilement doux

// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});

// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){

  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash (#)
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area (the speed of the animation)
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
});
Essayez - le vous - même »

Scrollspy & Affix

Utilisation du Affix plug - in avec le plugin Scrollspy:

Menu horizontal (Navbar)

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>

</body>
Essayez - le vous - même »

Menu vertical (sidenav)

<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>
Essayez - le vous - même »