x
1
2
<html lang="en">3
<head>4
<title>Bootstrap Example</title>5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1">7
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">8
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>9
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>10
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>11
<style>12
body {13
position: relative;14
}15
ul.nav-pills {16
top: 20px;17
position: fixed;18
}19
div.col-8 div {20
height: 500px;21
}22
</style>23
</head>24
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">25
26
<div class="container-fluid">27
<div class="row">28
<nav class="col-sm-3 col-4" id="myScrollspy">29
<ul class="nav nav-pills flex-column">30
<li class="nav-item">31
<a class="nav-link active" href="#section1">Section 1</a>32
</li>33
<li class="nav-item">34
<a class="nav-link" href="#section2">Section 2</a>35
</li>36
<li class="nav-item">37
<a class="nav-link" href="#section3">Section 3</a>38
</li>39
<li class="nav-item dropdown">40
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>41
<div class="dropdown-menu">42
<a class="dropdown-item" href="#section41">Link 1</a>43
<a class="dropdown-item" href="#section42">Link 2</a>44
</div>45
</li>46
</ul>47
</nav>48
<div class="col-sm-9 col-8">49
<div id="section1" class="bg-success"> 50
<h1>Section 1</h1>51
<p>Try to scroll this section and look at the navigation list while scrolling!</p>52
</div>53
<div id="section2" class="bg-warning"> 54
<h1>Section 2</h1>55
<p>Try to scroll this section and look at the navigation list while scrolling!</p>56
</div> 57
<div id="section3" class="bg-secondary"> 58
<h1>Section 3</h1>59
<p>Try to scroll this section and look at the navigation list while scrolling!</p>60
</div>61
<div id="section41" class="bg-danger"> 62
<h1>Section 4-1</h1>63
<p>Try to scroll this section and look at the navigation list while scrolling!</p>64
</div> 65
<div id="section42" class="bg-info"> 66
<h1>Section 4-2</h1>67
<p>Try to scroll this section and look at the navigation list while scrolling!</p>68
</div>69
</div>70
</div>71
</div>72
73
</body>74
</html>