Angular материал - Affix - программирование

Мне нужно создать что-то вроде этого изображения:

что при прокрутке эти элементы будут "активными", если контент не отображается на странице. У каждого элемента будет якорь.

Кто-нибудь знает простой и чистый способ сделать это?

Ответы

Ответ 1

Если вам нужно создать с нуля, вы можете следовать руководству:

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

В нем объясняется, как создать двухуровневое автоматическое оглавление. Вы можете клонировать код, выполняя следующие действия:

# 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

Также вы можете использовать материал angular оглавление https://github.com/angular/material.angular.io/blob/b029f9108d4c89ce4dd75cffaaf4ea9d365dcc70/src/app/shared/table-of-contents

Ответ 2

Решение разделено на три части: 1. Самое правое меню, которое изменяется при прокрутке. Это ссылки при нажатии на эту позицию на той же странице.

<a href="#NestedList">Nested List</a>

Теперь вы создаете фактическую ссылку. Вложенный список в этом примере.

<a name="NestedList">Nested List with details </a>

Теперь для выделения текста с помощью css или angular вы можете проверить, присутствует ли div в окне браузера. Затем просто выделите, что бы вы ни находили, начиная с вершины.

Примечание. Имя и Href имеют разницу только 1 char # (фунт). Это необходимость.