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.

Example

Open Demo

Follow the following steps to create Materialize 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

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

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS