search

eddiemf / vue-scrollactive

Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.
MIT License
542 stars 70 forks source link

Multiple items with the same link only got is-active at the last item #49

Closed Bigdragon13th closed 4 years ago

Bigdragon13th commented 5 years ago

If the item in menu point to the same link, only the last item got the is-active class when page scroll to that section.

E.g.

<div class="submenu-links">
  <a href="#highlights" class="scrollactive-item submenu-item" v-if="preset.data.infoHighlights && preset.data.infoHighlights.length">Highlights</a>
  <a href="#itinerary" class="scrollactive-item submenu-item">Itinerary</a>
  <a href="#priceinfo" class="scrollactive-item submenu-item">Pricing info</a>
  <a href="#priceinfo" class="scrollactive-item submenu-item">Pricing info 2</a>
  <a href="#tripinfo" class="scrollactive-item submenu-item">Trip info</a>
</div>

Only Pricing info 2 got is-active class.

Expected Behavior: Both Pricing info and Pricing info 2 should got is-active class.

eddiemf commented 5 years ago

Oh man, you guys come with some nice edge cases from time to time hehe

To deliver the expected behaviour I would have to rewrite a big chunk of the plugin due to the way it finds the current section, which I'll probably won't do in the near future, so my suggestion is that you hack it a little bit by maybe observing the item that gets the proper active class and then adding it to the one that didn't get it too. Not the best solution but easy to implement and solves your problem I guess.

Or you can always try to implement the solution in a fork, but I would probably not merge it very soon as it would require a lot of changes and a lot of tests to see if everything still works.