Materialize CSS
Materialize Scrollspy
Materialize Scrollspy is a jQuery plugin that tracks certain elements and which element the user's screen is currently centered on. Our main demo of this is our table of contents on every documentation page to the right.
<div class="row">

     <div class="col s12 m9 l10">
      <div id="HTML5" class="section scrollspy">
        <div class="card-panel green">
            <h4>HTML5 Tutorial</h4>
            <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...</p>
        </div>
      </div>

      <div id="CSS3" class="section scrollspy">
        <div class="card-panel blue">
            <h4>CSS3 Tutorial</h4>
            <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....</p>
        </div>
      </div>

      <div id="Bootstrap4" class="section scrollspy">
        <div class="card-panel cyan">
            <h4>Bootstrap 4 Tutorial</h4>
            <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, ...</p>
         </div>
      </div>
      
      <div id="MD_CSS" class="section scrollspy">
        <div class="card-panel red lighten-1">
            <h4>Materialize CSS Tutorial</h4>
            <p>Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present), Material Design is a language that combines the classic principles ....</p>
        </div>
      </div>
    </div>
    <div class="col hide-on-small-only m3 l2">
      <ul class="section table-of-contents right-align" style="padding-top:250px; position:fixed;">
        <li class="left-align"><a href="#HTML5">HTML5</a></li>
        <li class="left-align"><a href="#CSS3">CSS3</a></li>
        <li class="left-align"><a href="#Bootstrap4">Bootstrap</a></li>
        <li class="left-align"><a href="#MD_CSS">Materialize</a></li>
      </ul>
    </div>
    
</div>

<script type="text/javascript">
	$(document).ready(function(){
	  $('.scrollspy').scrollSpy();
	});
</script>
Output :
Scroll Spy
jQuery Plugin Initialization
$(document).ready(function(){
    $('.scrollspy').scrollSpy();
  });