ScrollSpy

Un ScrollSpy es un menu colocado a la derecha de la pagina que te enlaza a las secciones de la misma pagina
Tenemos que utilizar el sistema de columnas para dividir la pantalla en dos columnas de 10 y 2 col
En el contenido creamos las secciones, creando divs con su id y la clase scrollspy
En la columna de la derecha creamos una lista ul con la clase table-of-contents que es la que generara el estilo de la lista (es opcional)
Cada elemento de la lista tiene un ancla con un href apuntando al id de cada seccion
Es necesario inicializar los script para que se vean los efectos

Primero

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim incidunt molestias nulla sed facilis. Nesciunt veniam ducimus saepe at maiores quisquam officiis cum! Cupiditate, perferendis ipsa enim atque quo perspiciatis aperiam porro, aliquam provident voluptatem blanditiis dolorum? Ea, magni soluta sint reprehenderit molestias fugit possimus nostrum tempore eaque maiores!

Segundo

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur odit earum accusantium velit nostrum ducimus possimus dolore odio illo vero quas eum ratione laudantium, molestiae quibusdam voluptates id, unde a! Nihil natus placeat vitae harum nostrum consectetur culpa cum, unde minima alias, voluptatum aliquid reprehenderit dolorum aliquam perspiciatis id odio.

Tercero

Lorem ipsum dolor sit amet consectetur adipisicing elit. In, fugit totam, veniam enim cumque autem vel, distinctio corrupti ipsam nesciunt exercitationem quaerat alias blanditiis? Mollitia fugit non nesciunt deleniti saepe nisi vitae, blanditiis similique corporis consequuntur fuga voluptatem tempora eos praesentium animi consectetur incidunt? Quasi facilis omnis itaque laborum vitae.

<div class="row">
    <div class="col m10">
        <div class="scrollspy" id="primero">
            contenido 1
        </div>
        <div class="scrollspy" id="segundo">
            contenido 2
        </div>
        <div class="scrollspy" id="tercero">
            contenido 3
        </div>
    </div>

    <div class=" col m2 hide-on-small-only" >
        <div class=" pinned " >
            <ul class="section table-of-contents ">                
                <li><a href="#primero">Primero</a></li>
                <li><a href="#segundo">Segundo</a></li>
                <li><a href="#tercero">Tercero</a></li>                
            </ul>
        </div>                
    </div>
</div>

Primero
Segundo
Tercero

Inicializacion

<div class="scrollspy" id="primero">
    Contenido
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var elems = document.querySelectorAll('.scrollspy');
        var instances = M.ScrollSpy.init(elems, options);
    });
</script>

Opciones

Name	Type	Default	Description
throttle	Number	100	Throttle of scroll handler.
scrollOffset	Number	200	Offset for centering element when scrolled to.
activeClass	String	'active'	Class applied to active elements.
getActiveElement	Function		Used to find active element.

ScrollSpy
Inicializacion
Opciones