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

Active class applied on page load #75

Open Daniel-Knights opened 4 years ago

Daniel-Knights commented 4 years ago

Hi, I'm having an issue where the active-class is applied on page-load but I only want it applied after the user clicks the link. I've tried :highlightFirstItem="false", even though this is the default setting, but it didn't work. Am I wrong in thinking this is the setting for it? Is there a way around this issue I'm not aware of?

Here's the code I'm using:

<scrollactive
    active-class="nav-selected"
    :offset="0"
    :duration="1000"
    bezier-easing-value=".5,0,.35,1"
    :modifyUrl="false"
>
    <a href="#smooth-scroll" class="scrollactive-item"
        >Smooth Scroll</a
    >
</scrollactive>
.nav-selected {
    font-weight: bold;
}

The text is bold on page-load, if I scroll at all, the active class is removed and doesn't respond to any scrolling (how I want it) but then works as it should on click:

Example