My issue involves implementing a fixed navigation bar with the following structure:
<nav class='navigation'>
<div :class="{ active: }" @click='scrollTo(".test1")'></div>
<div :class="{ active: }" @click='scrollTo(".test2")'></div>
<div :class="{ active: }" @click='scrollTo(".test3")'></div>
<div :class="{ active: }" @click='scrollTo(".test4")'></div>
</nav>
Furthermore, I have defined a property named activeSection in my code:
data() {
return {
activeSection: test1 // Currently set as test1, but it can be changed to test2, test3, or test4
}
}
My challenge lies in applying the active class to the appropriate navigation element based on the value of activeSection. For instance, if activeSection == test1, the first navigation element should receive the active class, and similarly for the subsequent sections.