Angular material - Affix

Question

I'm using angular 4 with angular material 2.0.0-beta.12.

I want to achieve something that's called "affix~" on angular material website

I need to build something like this image:

that, while scrolling, these items will be "active" if the content is beeing seen on the page. Each item will have an anchor as well.

Anyone knows an easy and clean way to do it?

Thank you in advance for your time.

Answer 1

If you need to create from scratch you can follow the tutorial:

https://oliverveits.wordpress.com/2017/07/18/angular-4-automatic-table-of-contents/

It explains how to create a two-level automatic Table of Contents. You can clone the code by doing the following:

# git clone https://github.com/oveits/ng-universal-demo
# cd ng-universal-demo
# git checkout 8ca27d5   # to be sure you are working with exact same that has been created in this blog

Also you can use the material angular table of contents https://github.com/angular/material.angular.io/blob/b029f9108d4c89ce4dd75cffaaf4ea9d365dcc70/src/app/shared/table-of-contents