javascriptjquerycssmaterializecss-frameworks

How can I get the element name from Materialize Scrollspy Plugin


I am trying to get the current element on from my browser's view using Materialize's Scrollspy plugin's getActiveElement function. Once I get the element ID, I want to add an animation class to it. I'm not sure how to implement the getActiveElement function option to retrieve the element id.

Please refer to documentation

HTML:

<section
      id="projects"
      class="section section-popular grey lighten-4 scrollspy"
    >
</section>

JS:

<script>
const srcollspy = document.querySelectorAll(".scrollspy");
      M.ScrollSpy.init(srcollspy , {
        //getActiveElement: (not sure how to use this),
      });
</script>

Some help would be really appreciated


Solution

  • Found the answer:

    logged the element using

    JS:

    const scrollspy = document.querySelectorAll(".scrollspy");
          M.ScrollSpy.init(scrollspy, {
            getActiveElement: function (id) {
              console.log('this is the element: a[href="#' + id + '"]');
            },
          });