materialize
  1. materialize-scrollspy
PreviousNext

Materialize Scrollspy

The Materialize Scrollspy plugin is used to highlight active page sections as you scroll through a webpage. This plugin makes it easy for users to navigate a website and keep track of their progress.

Syntax

$('.scrollspy').scrollSpy();

Use

To use the Materialize Scrollspy, you need to add the relevant HTML and JavaScript code to your webpage.

First, add the scrollspy class to the element you want to use as the anchor for the sections. 

<div class="scrollspy">
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
  <a href="#section3">Section 3</a>
</div>

Next, add the id attribute to the sections you want to highlight as the user scrolls.

<div id="section1">
  <h2>Section 1</h2>
  <p>Content for section 1</p>
</div>

<div id="section2">
  <h2>Section 2</h2>
  <p>Content for section 2</p>
</div>

<div id="section3">
  <h2>Section 3</h2>
  <p>Content for section 3</p>
</div>

Finally, initialize the Scrollspy plugin with jQuery.

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

Importance

The Materialize Scrollspy is a useful tool for enhancing user experience on a website. It allows users to quickly navigate to the sections they are interested in and easily keep track of their location on the page. This can ultimately lead to increased engagement and satisfaction with your website.

Example

Here is an example of how to use the Materialize Scrollspy to highlight sections on a webpage:

<!DOCTYPE html>
<html>
<head>
    <title>Materialize Scrollspy Example</title>
    <!-- Import Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Import jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <!-- Import Materialize JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
    <nav>
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
        </ul>
      </div>
    </nav>

    <div class="scrollspy">
      <div id="section1">
        <h2>Section 1</h2>
        <p>Content for section 1</p>
      </div>

      <div id="section2">
        <h2>Section 2</h2>
        <p>Content for section 2</p>
      </div>

      <div id="section3">
        <h2>Section 3</h2>
        <p>Content for section 3</p>
      </div>
    </div>

    <script>
      $(document).ready(function(){
        $('.scrollspy').scrollSpy();
      });
    </script>
</body>
</html>

Summary

The Materialize Scrollspy is a jQuery plugin that makes it easy to highlight active page sections as you scroll through a webpage. It is a useful tool for enhancing user experience by allowing users to easily navigate and keep track of their location on a page.

PushpinSidenav
Published on: