Materialize CSS Scrollspy

Materialize CSS Scrollspy

Materialize CSS scrollspy is a jQuery plugin that tracks certain elements and places the element in the center of the user's screen.

Follow the following steps to create Materialize CSS scrollspy.

Step:1

Think about responsive layout and create responsive layout using Materialize grid system.

Layout Design
      
<div class="row">
    <!--Scrollspy content Section-->
   <div class="col s12 m9 l10"></div>
   <!--Scrollspy Menu Navigation-->
   <div class="col hide-on-small-only m3 l2"></div>
</div>
   

Step:2

Put your content inside the scrollspy content section and assign .scrollspy class as well as unique Id to the every section.

Scrollspy Content
      
 <div class="row">
   <div class="col s12 m9 l10">    
      <div id="introduction" class="section scrollspy">
        <p>Content </p>
      </div>
      <div id="structure" class="section scrollspy">
        <p>Content </p>
      </div>
   </div>
   
   <div class="col hide-on-small-only m3 l2"></div>
 </div>
   

Step:3

Now, create scrollspy side navaigation menu & assign the unique id of the scrollspy content section to the respective scrollspy navaigation menu href's attribute value and place hash tag before the id.

Scrollspy Navigation
       
<div class="row">
   <div class="col s12 m9 l10">    
      <div id="introduction" class="section scrollspy">
        <p>Content </p>
      </div>
      <div id="structure" class="section scrollspy">
        <p>Content </p>
      </div>
   </div>
   <div class="col hide-on-small-only m3 l2">   
      <ul class="section table-of-contents">
        <li><a href="#introduction">Introduction</a></li>
        <li>>a href="#structure">Structure</a></li>      
      </ul>
   </div>
 </div>
   

Step:4 Initialization

Now, initialize the scrollspy through jQuery or javascript.

Source Code

Download
<script type="text/javascript">
 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.scrollspy');
    var instances = M.ScrollSpy.init(elems, options);
  });
  // Or with jQuery
  $(document).ready(function(){
    $('.scrollspy').scrollSpy(); 
  } );
 </script>    
Try it yourself

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS