Bootstrap 4 Scrollspy

The Bootstrap Scrollspy component allows you to automatically update nav targets based on scroll position.

Scrollspy allows you to highlight the current position in a menu, based on the user's scroll position. As the user scrolls down the page, the applicable menu item is highlighted, based one where the scroll position is.

Scrollspy Example

Here's an example of Scrollspy in action. Scroll down the page/frame and see each menu item highlighted as you reach the corresponding position in the page:

<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>

Scrollspy requires Relative Positioning

Scrollspy requires the use of position: relative; on the element being spied on.

This is most commonly the <body> element, so you can apply it to that element. However, when spying on other elements, you'll need to have a height set and overflow-y: scroll; applied.