English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Grund教程

Bootstrap4 Scroll-Abhörer

Der Scroll-Abhörer (Scrollspy) Plugin, das automatisch aktualisierende Navigationsplugin, aktualisiert automatisch die entsprechenden Navigationsziele basierend auf dem Position des Scrollbalkens. Sein grundlegendes Implementierung ist mit Ihrem Scrollen.

Wie man einen Scroll-Abhörer erstellt

Das folgende Beispiel zeigt, wie man einen Scroll-Abhörer erstellt:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</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">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">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>Section　1</h1>
　　<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens! Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens!/p>
　　<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens! Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens!/p>
</div>
<div　id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
　　<h1>Section　2</h1>
　　<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens! Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens!/p>
　　<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens! Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens!/p>
</div>
<div　id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
　　<h1>Section　3</h1>
　　<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens! Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens!/p>
　　<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens! Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens!/p>
</div>
<div　id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
　　<h1>Section　4　Untermenü　1</h1>
　　<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens! Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens!/p>
　　<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens! Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens!/p>
</div>
<div　id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
　　<h1>Section　4　Untermenü　2</h1>
　　<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens! Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens!/p>
　　<p>Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens! Probieren Sie, diesen Abschnitt zu scrollen und überprüfen Sie die Navigationsleiste während des Scrollens!/p>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Das Aussehen nach dem Ausführen ist wie folgt:

Beispielanalyse

Fügen Sie data hinzu, zu dem Sie hören möchten (meistens body)-spy="scroll" hinzu.

Fügen Sie dann data-target-Attribut, dessen Wert der id oder die class der Navigationsleiste (.navbar) ist. Auf diese Weise kann eine Verbindung zum scrollbaren Bereich hergestellt werden.

Beachten Sie das id des scrolbaren Elements (<div id="section1)> Muss mit der Linkoption der Navigationsleiste übereinstimmen (<a href="#section1">)。

可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。

设置相对定位: 使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。

以下示例设置了垂直滚动监听：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</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>Section　1</h1>
　　　　　　　　<p>Probieren Sie diesen Abschnitt zu rollen und sehen Sie die Navigationsliste beim Rollen an!"/p>
　　　　　　</div>
　　　　　　<div　id="section2"　class="bg-warning">　
　　　　　　　　<h1>Section　2</h1>
　　　　　　　　<p>Probieren Sie diesen Abschnitt zu rollen und sehen Sie die Navigationsliste beim Rollen an!"/p>
　　　　　　</div>　　　　　　　　
　　　　　　<div　id="section3"　class="bg-secondary">　　　　　　　　　
　　　　　　　　<h1>Section　3</h1>
　　　　　　　　<p>Probieren Sie diesen Abschnitt zu rollen und sehen Sie die Navigationsliste beim Rollen an!"/p>
　　　　　　</div>
　　　　　　<div　id="section41"　class="bg-danger">　　　　　　　　　
　　　　　　　　<h1>Section　4-1</h1>
　　　　　　　　<p>Probieren Sie diesen Abschnitt zu rollen und sehen Sie die Navigationsliste beim Rollen an!"/p>
　　　　　　</div>　　　　　　
　　　　　　<div　id="section42"　class="bg-info">　　　　　　　　　
　　　　　　　　<h1>Section　4-2</h1>
　　　　　　　　<p>Probieren Sie diesen Abschnitt zu rollen und sehen Sie die Navigationsliste beim Rollen an!"/p>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Das Aussehen nach dem Ausführen ist wie folgt:

Bootstrap4 WerkzeugeBootstrap4 Pop-up-Fenster