Tutorial di base di Bootstrap4

Miniapplicazione di Bootstrap4 Casella di avviso di Bootstrap4

Ascoltatore di scorrimento di Bootstrap4

Il plugin di osservazione della scorrimento (Scrollspy), che aggiorna automaticamente il plugin di navigazione, aggiorna automaticamente l'obiettivo della navigazione in base alla posizione della barra di scorrimento. La sua implementazione di base è in base alla tua scorrimento.

Come creare un'osservazione della scorrimento

Esempio seguente dimostra come creare un'osservazione della scorrimento:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/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-sm bg-dark navbar-dark fixed-top">　　
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#section1">Sezione 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">
　　　　　　　　Sezione 4
　　　　　　</a>
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-item" href="#section41">Link 1</a>
　　　　　　　　<a class="dropdown-item" href="#section42">Link 2</a>
　　　　　　</div>
　　　　</li>
　　</ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
　　<h1>Sezione 1</h1>
　　<p>Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi! Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi!</p>
　　<p>Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi! Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
　　<h1>Sezione 2</h1>
　　<p>Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi! Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi!</p>
　　<p>Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi! Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
　　<h1>Sezione 3</h1>
　　<p>Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi! Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi!</p>
　　<p>Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi! Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
　　<h1>Sezione 4 Sottomenu 1</h1>
　　<p>Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi! Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi!</p>
　　<p>Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi! Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
　　<h1>Sezione 4 Sottomenu 2</h1>
　　<p>Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi! Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi!</p>
　　<p>Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi! Prova a scorrere questa sezione e guarda la barra di navigazione mentre scivi!</p>
</div>
</body>
</html>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Esempio di spiegazione

Aggiungi data-spy="scroll" all'elemento che desideri monitorare (solitamente il body).

Poi aggiungi l'attributo data-target, il cui valore è l'id o la classe della barra di navigazione (.navbar). In questo modo è possibile collegarsi all'area scorrevole.

Attenzione all'id degli elementi scorrevoli (<div id="section1">) deve corrispondere all'opzione di collegamento nella barra di navigazione (<a href="#section1">)).

L'opzione data-offset può essere utilizzata per calcolare la posizione di scorrimento, con un offset di pixel dal bordo superiore. Il valore predefinito è 10 px.

Impostazione della posizione relativa: usato data-spy="scroll" degli elementi deve avere il CSS La posizione L'attributo deve essere impostato su "relative" per funzionare.

Di seguito è riportato un esempio di monitoraggio della scorrimento verticale:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/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">Link 1</a>
　　　　　　　　　　　　<a class="dropdown-item" href="#section42">Link 2</a>
　　　　　　　　　　</div>
　　　　　　　　</li>
　　　　　　</ul>
　　　　</nav>
　　　　<div class="col-sm-9 col-8">
　　　　　　<div id="section1" class="bg-success">　　　　
　　　　　　　　<h1>Sezione 1</h1>
　　　　　　　　<p>Tentare di far scorrere questa sezione e guardare l'elenco di navigazione mentre scorre!</p>
　　　　　　</div>
　　　　　　<div id="section2" class="bg-warning">　
　　　　　　　　<h1>Sezione 2</h1>
　　　　　　　　<p>Tentare di far scorrere questa sezione e guardare l'elenco di navigazione mentre scorre!</p>
　　　　　　</div>　　　　　　　　
　　　　　　<div id="section3" class="bg-secondary">　　　　　　　　　
　　　　　　　　<h1>Sezione 3</h1>
　　　　　　　　<p>Tentare di far scorrere questa sezione e guardare l'elenco di navigazione mentre scorre!</p>
　　　　　　</div>
　　　　　　<div id="section41" class="bg-danger">　　　　　　　　　
　　　　　　　　<h1>Sezione 4-1</h1>
　　　　　　　　<p>Tentare di far scorrere questa sezione e guardare l'elenco di navigazione mentre scorre!</p>
　　　　　　</div>　　　　　　
　　　　　　<div id="section42" class="bg-info">　　　　　　　　　
　　　　　　　　<h1>Sezione 4-2</h1>
　　　　　　　　<p>Tentare di far scorrere questa sezione e guardare l'elenco di navigazione mentre scorre!</p>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Miniapplicazione di Bootstrap4 Casella di avviso di Bootstrap4