Bootstrap 4 Scrollspy

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
  <style>
  body {
    position: relative;
  }
  ul.nav-pills {
    top: 20px;
    position: fixed;
  }
  div.col-8 div {
    height: 500px;
  }
  </style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">

<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-4" id="myScrollspy">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#section1">Section 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">Section 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">Section 3</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#section41">Link 1</a>
            <a class="dropdown-item" href="#section42">Link 2</a>
          </div>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9 col-8">
      <div id="section1" class="bg-success">    
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="section2" class="bg-warning"> 
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>        
      <div id="section3" class="bg-secondary">         
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="section41" class="bg-danger">         
        <h1>Section 4-1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>      
      <div id="section42" class="bg-info">         
        <h1>Section 4-2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

PCFET0NUWVBFIGh0bWw+DQo8aHRtbCBsYW5nPSJlbiI+DQo8aGVhZD4NCiAgPHRpdGxlPkJvb3RzdHJhcCBFeGFtcGxlPC90aXRsZT4NCiAgPG1ldGEgY2hhcnNldD0idXRmLTgiPg0KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEiPg0KICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9Imh0dHBzOi8vbWF4Y2RuLmJvb3RzdHJhcGNkbi5jb20vYm9vdHN0cmFwLzQuNS4yL2Nzcy9ib290c3RyYXAubWluLmNzcyI+DQogIDxzY3JpcHQgc3JjPSJodHRwczovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8zLjUuMS9qcXVlcnkubWluLmpzIj48L3NjcmlwdD4NCiAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuanMuY2xvdWRmbGFyZS5jb20vYWpheC9saWJzL3BvcHBlci5qcy8xLjE2LjAvdW1kL3BvcHBlci5taW4uanMiPjwvc2NyaXB0Pg0KICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvNC41LjIvanMvYm9vdHN0cmFwLm1pbi5qcyI+PC9zY3JpcHQ+DQogIDxzdHlsZT4NCiAgYm9keSB7DQogICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICB9DQogIHVsLm5hdi1waWxscyB7DQogICAgdG9wOiAyMHB4Ow0KICAgIHBvc2l0aW9uOiBmaXhlZDsNCiAgfQ0KICBkaXYuY29sLTggZGl2IHsNCiAgICBoZWlnaHQ6IDUwMHB4Ow0KICB9DQogIDwvc3R5bGU+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiA6Oi13ZWJraXQtc2Nyb2xsYmFye3dpZHRoOjdweDtoZWlnaHQ6N3B4O306Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNre2JhY2tncm91bmQ6I2ZmZjt9Ojotd2Via2l0LXNjcm9sbGJhci10aHVtYntib3JkZXItcmFkaXVzOjVweDtiYWNrZ3JvdW5kOiMyZjQ1ZmY7fTwvc3R5bGU+PC9oZWFkPg0KPGJvZHkgZGF0YS1zcHk9InNjcm9sbCIgZGF0YS10YXJnZXQ9IiNteVNjcm9sbHNweSIgZGF0YS1vZmZzZXQ9IjEiPg0KDQo8ZGl2IGNsYXNzPSJjb250YWluZXItZmx1aWQiPg0KICA8ZGl2IGNsYXNzPSJyb3ciPg0KICAgIDxuYXYgY2xhc3M9ImNvbC1zbS0zIGNvbC00IiBpZD0ibXlTY3JvbGxzcHkiPg0KICAgICAgPHVsIGNsYXNzPSJuYXYgbmF2LXBpbGxzIGZsZXgtY29sdW1uIj4NCiAgICAgICAgPGxpIGNsYXNzPSJuYXYtaXRlbSI+DQogICAgICAgICAgPGEgY2xhc3M9Im5hdi1saW5rIGFjdGl2ZSIgaHJlZj0iI3NlY3Rpb24xIj5TZWN0aW9uIDE8L2E+DQogICAgICAgIDwvbGk+DQogICAgICAgIDxsaSBjbGFzcz0ibmF2LWl0ZW0iPg0KICAgICAgICAgIDxhIGNsYXNzPSJuYXYtbGluayIgaHJlZj0iI3NlY3Rpb24yIj5TZWN0aW9uIDI8L2E+DQogICAgICAgIDwvbGk+DQogICAgICAgIDxsaSBjbGFzcz0ibmF2LWl0ZW0iPg0KICAgICAgICAgIDxhIGNsYXNzPSJuYXYtbGluayIgaHJlZj0iI3NlY3Rpb24zIj5TZWN0aW9uIDM8L2E+DQogICAgICAgIDwvbGk+DQogICAgICAgIDxsaSBjbGFzcz0ibmF2LWl0ZW0gZHJvcGRvd24iPg0KICAgICAgICAgIDxhIGNsYXNzPSJuYXYtbGluayBkcm9wZG93bi10b2dnbGUiIGRhdGEtdG9nZ2xlPSJkcm9wZG93biIgaHJlZj0iIyI+U2VjdGlvbiA0PC9hPg0KICAgICAgICAgIDxkaXYgY2xhc3M9ImRyb3Bkb3duLW1lbnUiPg0KICAgICAgICAgICAgPGEgY2xhc3M9ImRyb3Bkb3duLWl0ZW0iIGhyZWY9IiNzZWN0aW9uNDEiPkxpbmsgMTwvYT4NCiAgICAgICAgICAgIDxhIGNsYXNzPSJkcm9wZG93bi1pdGVtIiBocmVmPSIjc2VjdGlvbjQyIj5MaW5rIDI8L2E+DQogICAgICAgICAgPC9kaXY+DQogICAgICAgIDwvbGk+DQogICAgICA8L3VsPg0KICAgIDwvbmF2Pg0KICAgIDxkaXYgY2xhc3M9ImNvbC1zbS05IGNvbC04Ij4NCiAgICAgIDxkaXYgaWQ9InNlY3Rpb24xIiBjbGFzcz0iYmctc3VjY2VzcyI+ICAgIA0KICAgICAgICA8aDE+U2VjdGlvbiAxPC9oMT4NCiAgICAgICAgPHA+VHJ5IHRvIHNjcm9sbCB0aGlzIHNlY3Rpb24gYW5kIGxvb2sgYXQgdGhlIG5hdmlnYXRpb24gbGlzdCB3aGlsZSBzY3JvbGxpbmchPC9wPg0KICAgICAgPC9kaXY+DQogICAgICA8ZGl2IGlkPSJzZWN0aW9uMiIgY2xhc3M9ImJnLXdhcm5pbmciPiANCiAgICAgICAgPGgxPlNlY3Rpb24gMjwvaDE+DQogICAgICAgIDxwPlRyeSB0byBzY3JvbGwgdGhpcyBzZWN0aW9uIGFuZCBsb29rIGF0IHRoZSBuYXZpZ2F0aW9uIGxpc3Qgd2hpbGUgc2Nyb2xsaW5nITwvcD4NCiAgICAgIDwvZGl2PiAgICAgICAgDQogICAgICA8ZGl2IGlkPSJzZWN0aW9uMyIgY2xhc3M9ImJnLXNlY29uZGFyeSI+ICAgICAgICAgDQogICAgICAgIDxoMT5TZWN0aW9uIDM8L2gxPg0KICAgICAgICA8cD5UcnkgdG8gc2Nyb2xsIHRoaXMgc2VjdGlvbiBhbmQgbG9vayBhdCB0aGUgbmF2aWdhdGlvbiBsaXN0IHdoaWxlIHNjcm9sbGluZyE8L3A+DQogICAgICA8L2Rpdj4NCiAgICAgIDxkaXYgaWQ9InNlY3Rpb240MSIgY2xhc3M9ImJnLWRhbmdlciI+ICAgICAgICAgDQogICAgICAgIDxoMT5TZWN0aW9uIDQtMTwvaDE+DQogICAgICAgIDxwPlRyeSB0byBzY3JvbGwgdGhpcyBzZWN0aW9uIGFuZCBsb29rIGF0IHRoZSBuYXZpZ2F0aW9uIGxpc3Qgd2hpbGUgc2Nyb2xsaW5nITwvcD4NCiAgICAgIDwvZGl2PiAgICAgIA0KICAgICAgPGRpdiBpZD0ic2VjdGlvbjQyIiBjbGFzcz0iYmctaW5mbyI+ICAgICAgICAgDQogICAgICAgIDxoMT5TZWN0aW9uIDQtMjwvaDE+DQogICAgICAgIDxwPlRyeSB0byBzY3JvbGwgdGhpcyBzZWN0aW9uIGFuZCBsb29rIGF0IHRoZSBuYXZpZ2F0aW9uIGxpc3Qgd2hpbGUgc2Nyb2xsaW5nITwvcD4NCiAgICAgIDwvZGl2Pg0KICAgIDwvZGl2Pg0KICA8L2Rpdj4NCjwvZGl2Pg0KDQo8L2JvZHk+DQo8L2h0bWw+