Apply active class to an element when none are in the viewport about vue-scrollactive

[eddiemf]

Hey there, thanks for the feedback!

I'm planning on adding something similar to the exact option to always highlight the first item if the scroll position is before the first relative element. I'll try to work on it this week :)

[DamianMullins]

@eddiemf That would be great, I'm happy to help out with anything if you need me to.

Great plugin by the way!

[guillermograham]

Hi @eddiemf , this is a brilliant plugin. Thanks for all your work!

I'm trying to the feature highlightFirstItem you've added, I've added it as one of my options, but it's not highlighting the first item until I scroll.

Is there anything else I should have added?

				<scrollactive
					v-if="loaded"
					v-on:itemchanged="onItemChanged"
					scrollContainerSelector="#menu-component"
					highlightFirstItem
					:modifyUrl="false"
				>

[DamianMullins]

@guillermograham I apply the active class to the first item so that it is highlighted before scrolling.

[guillermograham]

Thanks @DamianMullins , I figured I would do that as a last resort if I can't get the highlightFirstItem option to work.

It would be good to know if I'm not implementing it correctly though, because @eddiemf 's option would be very clean.

[eddiemf]

Hey there, I'm actually not sure if this is working as intended, probably not because your options look correct. I'll make a few tests and fix this soon if needed, meanwhile you can do as @DamianMullins said and just apply the class to the first :)

Thanks for the feedback!

[guillermograham]

Thank you both!

[marcvan-dijk]

Hi there, thanks for your work! I'm having difficulty getting it to work. I've tried to add the attribute with dashes, without dashes, capitals and no capitals, but no luck.
Any tips on how to apply highlightFirstItem="true" ?

Thanks in advance

[DamianMullins]

@marcvan-dijk I add the prop in my code like this <scrollactive highlight-first-item> and it behaves as expected?

[marcvan-dijk]

highlight-first-item

nope nothing, im using vuetify with an extended v-app-bar, maybe thats the issue. I also tried to add the active class to the first item in the array, also not working.

this is the start of the tag now:

                    <scrollactive class="nav-scroll-items" 
                                  active-class="active"
                                  highlight-first-item
                                  offset="112">

when I'm scrolling a bit and then back up it does light up, so the offset seems to be working correctly