Bootstrap 4 Scrollspy


How to create a Scrollspy

Scrollspy in Bootstrap automatically updates the navigation list link when the user mouse scrolls. It is attached to the body. Take the following steps to create it:

<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar bg-dark navbar-dark navbar-expand-sm fixed-top">
<ul class="navbar-nav">
<li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#services" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
<div id="home" class="bg-primary container-fluid">
<div class="container">
<h3>Home section</h3>
<p>This is an example text....</p>
</div>
</div>
</body>

Scrollspy Vertical Navagation Bar

<body data-spy="scroll" data-target="#Navbar" data-offset="50">
<div class="row container-fluid">
<div class="col-1">
<ul class="nav nav-pills flex-column fixed-left" id="Navbar">
<li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#services" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="col-11">
<div id="home" class="bg-primary container-fluid">
<div class="container">
<h3>Home section</h3>
<p>This is an example text....</p>
</div>
</div>
.....
</body>