**Scrollspy** is a bootstrap​ plugin that automatically updates links in a navigation list based on the current scroll position. 

In the example below, scroll down the HTML page and note how the sections in the navigation bar are updated accordingly.

body {
  position: relative;
}
ul.nav-pills {
  top: 20px;
  position: fixed;
}
div.col-8 div {
  height: 350px;
}
#section1 {color: #fff; background-color: #51004B;}
#section2 {color: #fff; background-color: #00318C;}
#section3 {color: #fff; background-color: #008C7F;}
#section4 {color: #fff; background-color: #1C8C00;}

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-4" id="myScrollspy">
      <ul class="nav nav-pills flex-column">
        <li>
          <a class="nav-link active" href="#section1">Section 1</a>
        </li>
        <li>
          <a class="nav-link" href="#section2">Section 2</a>
        </li>
        <li>
          <a class="nav-link" href="#section3">Section 3</a>
        </li>
        <li>
          <a class="nav-link" href="#section4">Section 4</a>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9 col-8">
      <div id="section1">    
            <h1>Section 1</h1>
            <p>Scroll down and note how the section on the left updates.</p>
        </div>
        <div id="section2"> 
            <h1>Section 2</h1>
            <p>Keep scrolling.</p>
        </div>        
        <div id="section3">         
            <h1>Section 3</h1>
            <p>Stuff related to section 3. Scroll down again.</p>
        </div>
        <div id="section4">         
            <h1>Section 4</h1>
            <p>Final section stuff. The navbar on the left is also on section 4.</p>
        </div>
    </div>
  </div>
</div>

</body>
</html>

codemirror

# Explanation
- The `data-spy="scroll"` attribute, added to the element, ​is meant to be used as the scrollable area. It is added to the `<body>` element on line $9$ in the example above.
- The `data-target` attribute is added with a value of the ID or the class name of the navigation bar. This connects the navigation bar with the scrollable area (line $9$ and line $12$).
- The ID of the scrollable elements must match the ID of the links inside the navbar's list of items. For example, `<div id="section1">` corresponds to `<a href="#section1">Section 1</a>` in the `<nav>` component.
- The optional `data-offset` attribute specifies the number of pixels used to offset from the top when calculating the position of the​ scroll. It is useful when the navbar changes its state too quickly during scrolling.  




What is a scrollspy?

Explanation