Изменение активного пункта меню при прокрутке страницы vuetify
Работаю с vuetify.При нажатии таба, страница прокручивается до якоря. Нужно сделать обратное. При прокрутки страницы, у таба, соответствующего заголовку страницы, появляется активный класс
Как можно подсвечивать пункт меню в зависимости от прокрутки страницы. В vuetify есть директива v-intersect, которая показывает, находится ли объект в области видимости. Если кто сталкивался с подобным или примерно понимает, напишите пожалуйста ваше решение с помощью этой директивы или может другим способом
Ссылка на пример https://codepen.io/kalorave/pen/zYKBjNK?editors=1010
Ответы (1 шт):
Можно сделать подсветку через v-bind:class
Якорю добавить условие на добавление класса, в условии указываем id элемента
<v-card-title id="anchor-home" v-bind:class="{ active: activeAnchor == '#anchor-home' }">
v-bind:class добавить для каждого заголовка заменяя id в условии на id элемента
В функции goToAnchor сохраняем переданный параметр якоря
goToAnchor(anchor) {
this.activatedAnchorFlag = true;
this.activeAnchor = anchor;
this.$vuetify.goTo(anchor);
setTimeout(() => {
this.activatedAnchorFlag = false;
this.activeAnchor = null;
}, 1000);
}