Bootstrap 4 scrollspy (Interactive Example)

<!DOCTYPE html>
<title>My Example</title>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
body {
padding-top: 1em;
}	
</style> <div class="container-fluid">
		
<nav id="scrollspy-nav" class="navbar navbar-default">
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#bast">Bast</a></li>
    <li class="nav-item"><a class="nav-link" href="#brogan">Brogan</a></li>
    <li class="nav-item"><a class="nav-link" href="#calceology">Calceology</a></li>
  </ul>
</nav>
<article data-spy="scroll" data-target="#scrollspy-nav" data-offset="0" style="overflow: scroll; width: 60vw;height: 70vh;font-size: 4vw;">
  <h4 id="bast">Bast Shoes</h4>
  <p>Bast shoes are shoes made primarily from bast (fiber from the bark of the linden tree or birch tree). They are a kind of basket, woven and fitted to the shape of a foot. Bast shoes are an obsolete traditional footwear of the forest areas of Northern Europe, formerly worn by poorer members of the Finnic peoples, Balts, and East Slavs. They were easy to manufacture, but not durable.</p>
  <h4 id="brogan">Brogan</h4>
  <p>Brogan-like shoes, called "brogues", were made and worn in Scotland and Ireland as early as the 16th century, and the shoe-type probably originated there.</p>
  <h4 id="calceology">Calceology</h4>
  <p>Calceology is the study of footwear, especially historical footwear whether as archaeology, shoe fashion history, or otherwise.</p>
  <p>Calceology comprises the examination, registration, research and conservation of leather shoe fragments.</p>
  <p>However, calceology is not yet formally recognized as a field of research. </p>
</article>

</div>
		

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<script>
// Initialize tooltip component
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>