English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le plugin de suivi de défilement (Scrollspy), qui met à jour automatiquement le plugin de navigation, met à jour automatiquement les objectifs de navigation en fonction de la position de la barre de défilement. Son implémentation de base est en fonction de votre défilement.
L'exemple suivant montre comment créer un suivi de défilement :
示例
<!DOCTYPE html>
<html>
<head>/<title>Bootstrap 示例<
title>-8>
<meta charset="utf-<meta name="viewport" content="width=device-width, initial1>
scale=//<script src="https:/cdn.staticfile.org-twitter/4bootstrap3bootstrap1/<link rel="stylesheet" href="https:/css
popper.min.js">//<script src="https:/bootstrap.min.css">/3bootstrap2bootstrap1/jquery/<script>
popper.min.js">//<script src="https:/jquery.min.js">/1bootstrap15popper.js/.0/umd/<script>
popper.min.js">//<script src="https:/cdn.staticfile.org-twitter/4bootstrap3bootstrap1/js./bootstrap.min.js">/<script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-petit bg-sombre navbar-sombre fixe-haut">
<ul class="navbar-nav">
<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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<div class="dropdown-menu>
<a class="dropdown-item" href="#section41">Lien 1</a>
<a class="dropdown-item" href="#section42">Lien 2</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluide bg-success" style="padding-top:70px;padding-bas:70px">
<h1>Section 1</h1>
<p>Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler！ Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler !</p>
<p>Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler！ Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler !</p>
</div>
<div id="section2" class="container-fluide bg-warning" style="padding-top:70px;padding-bas:70px">
<h1>Section 2</h1>
<p>Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler！ Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler !</p>
<p>Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler！ Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler !</p>
</div>
<div id="section3" class="container-fluide bg-secondaire" style="padding-top:70px;padding-bas:70px">
<h1>Section 3</h1>
<p>Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler！ Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler !</p>
<p>Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler！ Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler !</p>
</div>
<div id="section41" class="container-fluide bg-danger" style="padding-top:70px;padding-bas:70px">
<h1>Section 4 Sous-menu 1</h1>
<p>Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler！ Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler !</p>
<p>Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler！ Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler !</p>
</div>
<div id="section42" class="container-fluide bg-info" style="padding-top:70px;padding-bas:70px">
<h1>Section 4 Sous-menu 2</h1>
<p>Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler！ Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler !</p>
<p>Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler！ Essayer de faire défiler cette partie et de vérifier la barre de navigation pendant que vous faites défiler !</p>
</div>
</body>
</html>Essayez et voyez ‹/›Voici l'effet après l'exécution :
Ajoutez data à l'élément que vous souhaitez surveiller (généralement le body)-spy="scroll" .
Ensuite, ajoutez data-l'attribut target, dont la valeur est l'id ou la classe de la barre de navigation (.navbar). De cette manière, il est possible de se connecter à la zone déroulable.
,1>）Doit correspondre aux options de liens de la barre de navigation（《a href="#section"1>
">)。-可选项data 10 offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为
px。 设置相对定位: 使用-data spy="scroll" 的元素需要将其 CSS position
属性设置为 "relative" 才能起作用。
示例
<!DOCTYPE html>
<html>
<head>/<title>Bootstrap 示例<
title>-8>
<meta charset="utf-<meta name="viewport" content="width=device-width, initial1>
scale=//<script src="https:/cdn.staticfile.org-twitter/4bootstrap3bootstrap1/<link rel="stylesheet" href="https:/css
popper.min.js">//<script src="https:/bootstrap.min.css">/3bootstrap2bootstrap1/jquery/<script>
popper.min.js">//<script src="https:/jquery.min.js">/1bootstrap15popper.js/.0/umd/<script>
popper.min.js">//<script src="https:/cdn.staticfile.org-twitter/4bootstrap3bootstrap1/js./bootstrap.min.js">/<script>
<style>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-8 div {
height: 500px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" 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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
<div class="dropdown-menu>
<a class="dropdown-item" href="#section41">Lien 1</a>
<a class="dropdown-item" href="#section42">Lien 2</a>
</div>
</li>
</ul>
</nav>
<div class="col-sm-9 col-8>
<div id="section1" class="bg-success">
<h1>Section 1</h1>
<p>Essayez de faire défiler cette partie et regardez la liste de navigation pendant que vous faites défiler !</p>
</div>
<div id="section2" class="bg-warning">
<h1>Section 2</h1>
<p>Essayez de faire défiler cette partie et regardez la liste de navigation pendant que vous faites défiler !</p>
</div>
<div id="section3" class="bg-secondary">
<h1>Section 3</h1>
<p>Essayez de faire défiler cette partie et regardez la liste de navigation pendant que vous faites défiler !</p>
</div>
<div id="section41" class="bg-danger">
<h1>Section 4-1</h1>
<p>Essayez de faire défiler cette partie et regardez la liste de navigation pendant que vous faites défiler !</p>
</div>
<div id="section42" class="bg-info">
<h1>Section 4-2</h1>
<p>Essayez de faire défiler cette partie et regardez la liste de navigation pendant que vous faites défiler !</p>
</div>
</div>
</div>
</div>
</body>
</html>Essayez et voyez ‹/›Voici l'effet après l'exécution :