I am currently using the Bootstrap Vue Scrollspy feature in my project with Nuxt js. The elements are correctly referenced and are successfully spying on the content. What I would like to achieve is having the ability to update a specific div with the current element/section that is being viewed. Although I know that an active class is added to the element/section in view, I am unsure of how to retrieve this information.
Below is a snippet of my code:
<div id="mobilescrollspy"> <--- Scrollspy headings in a dropdown
<b-nav v-b-scrollspy>
<b-nav-item-dropdown text="Dropdown">
<b-dropdown-item class="text-base self-center" href="#item-1">
Item 1 Heading
</b-dropdown-item>
<b-dropdown-item class="text-base self-center" href="#item-2">
Item 2 Heading
</b-dropdown-item>
<b-dropdown-item class="text-base self-center" href="#item-3">
Item 3 Heading
</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
</div>
<div class="content"> <--- The content itself
<div id="item-1">
This is the content for item 1
</div>
<div id="item-2">
This is the content for item 2
</div>
<div id="item-3">
This is the content for item 3
</div>
</div>
My goal is to have a text display "Item 2 Heading" when item 2 is in view, and then update to reflect "Item 3 Heading" as I scroll further. Any guidance on how to accomplish this would be greatly appreciated! Thank you!