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 scrollspy.
Think about responsive layout and create responsive layout using Materialize grid system.
<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>
Put your content inside the scrollspy content section and assign .scrollspy
class as well as unique Id
to the every section.
<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>
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.
<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>
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>