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

$(document).ready(function(){
    $('.scrollspy').scrollSpy();
  });