Bootstrap 4
Bootstrap 4 Scrollspy
Bootstrap 4 Scrollspy is automatically update navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

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.

To add data-spy="scroll" to the element that should be used as the scrollable area ( <body> ) element. 

Then add the data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.

Scroll the area below the navbar and watch the .active class change. The dropdown items will be highlighted as well.
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<style style="text/css">
  body {
      position: relative; 
  }
</style>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#HTML5">HTML5</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#CSS3">CSS3</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Bootstrap
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#Bootstrap3">Bootstrap 3</a>
        <a class="dropdown-item" href="#Bootstrap4">Bootstrap 4</a>
      </div>
    </li>
  </ul>
</nav>

<div id="HTML5" class="container-fluid text-light bg-info" style="padding-top:70px;padding-bottom:70px">
  <h2>HTML5</h2>
  <p>HTML5 (No space between "HTML" and "5")is a markup language used for structuring 
  and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard.</p>
  <p>It was published in 28 October 2014, W3C also published an HTML 5.1 Candidate 
  Recommendation on 21 June 2016. The World Wide Web Consortium (W3C) to improve the 
  language with support for the latest multimedia,..</p>
</div>

<div id="CSS3" class="container-fluid text-light bg-success" style="padding-top:70px;padding-bottom:70px">
  <h2>CSS3</h2>
   <p>The CSS was started to develop around 1998. And till 2009, it was under development. 
  The first working draft of CSS3 came in 19-01-2001. but it was initially declared early 
  in the June 1999. The main difference between css2 and css3 is Media Queries, Namespaces, 
  Selectors Level 3, Color.</p>
</div>

<div id="Bootstrap3" class="container-fluid text-light bg-dark" style="padding-top:70px;padding-bottom:70px">
  <h2>Bootstrap 3</h2>
   <p>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing 
  responsive, mobile-first web sites. Bootstrap is faster and easier web development.</p>

  <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately 
  scales up to 12 columns as the device or viewport size increases. It includes predefined 
  classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</div>

<div id="Bootstrap4" class="container-fluid text-light bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h2>Bootstrap 4</h2>
  <p>Bootstrap 4 alpha 1 was released on 19th August 2015. Since then there have been 
  many alpha releases. And finally after that on 10th August 2017, Bootstrap released 
  the first beta for the version 4 of Bootstrap. Bootstrap 4 Beta 2 was released on 
  October 19th, 2017. The bootstrap is world's most popular frontend framework for 
  building or developing responsive websites, mobile-first sites and web applications.</p>
</div>
Output :
Scrollspy with Vertical Menu

Bootstrap's vertical scrollspy navigation pills as menu is following :

<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<style style="text/css">
body {
      position: relative;
  }
  ul.nav-pills {
      top: 20px;
      position: fixed;
  }
  div.col-8 div {
      height: 400px;
	  padding:15px;
  }
</style>

<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="#HTML5">HTML5</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#CSS3">CSS3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#Bootstrap3">Bootstrap 3</a>
        </li>
		<li class="nav-item">
          <a class="nav-link" href="#Bootstrap4">Bootstrap 4</a>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9 col-8">
      <div id="HTML5" class="text-light bg-info">    
        <h2>HTML5</h2>
        <p>HTML5 (No space between "HTML" and "5")is a markup language used for structuring 
	and presenting content on the World Wide Web. It is the fifth and current version 
	of the HTML standard.</p>
		<p>It was published in 28 October 2014, W3C also published an HTML 5.1 Candidate 
	Recommendation on 21 June 2016. The World Wide Web Consortium (W3C) to improve the 
	language with support for the latest multimedia,..</p>
      </div>
	  
      <div id="CSS3" class="text-light bg-success"> 
        <h2>CSS3</h2>
        <p>The CSS was started to develop around 1998. And till 2009, it was under development. 
  The first working draft of CSS3 came in 19-01-2001. but it was initially declared early 
  in the June 1999. The main difference between css2 and css3 is Media Queries, Namespaces, 
  Selectors Level 3, Color.</p>
      </div>    
	  
      <div id="Bootstrap3" class="text-light bg-dark">         
        <h2>Bootstrap 3</h2>
        <p>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing 
  responsive, mobile-first web sites. Bootstrap is faster and easier web development.</p>

		<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately 
  scales up to 12 columns as the device or viewport size increases. It includes predefined 
  classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
      </div>
	  
      <div id="Bootstrap4" class="text-light bg-primary">         
        <h2>Bootstrap4</h2>
        <p>Bootstrap 4 alpha 1 was released on 19th August 2015. Since then there have been 
  many alpha releases. And finally after that on 10th August 2017, Bootstrap released 
  the first beta for the version 4 of Bootstrap. Bootstrap 4 Beta 2 was released on 
  October 19th, 2017. The bootstrap is world's most popular frontend framework for 
  building or developing responsive websites, mobile-first sites and web applications.</p>
      </div>      
    </div>
  </div>
</div>

</body>
Output :