Я использую angular 4 с angular материалом 2.0.0-beta.12.
Я хочу добиться чего-то, что называется "affix ~" на angular веб-сайте материала
Мне нужно создать что-то вроде этого изображения:
что при прокрутке эти элементы будут "активными", если контент не отображается на странице. У каждого элемента будет якорь.
Кто-нибудь знает простой и чистый способ сделать это?
Заранее благодарим вас за ваше время.
Если вам нужно создать с нуля, вы можете следовать руководству:
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
Решение разделено на три части: 1. Самое правое меню, которое изменяется при прокрутке. Это ссылки при нажатии на эту позицию на той же странице.
<a href="#NestedList">Nested List</a>
Теперь вы создаете фактическую ссылку. Вложенный список в этом примере.
<a name="NestedList">Nested List with details </a>
Теперь для выделения текста с помощью css или angular вы можете проверить, присутствует ли div в окне браузера. Затем просто выделите, что бы вы ни находили, начиная с вершины.
Примечание. Имя и Href имеют разницу только 1 char # (фунт). Это необходимость.