Question: Is it possible to keep passed through elements active?

[clmanalo]

i have a menu link setup like this

<div class="side-dots-nav">
    <ul className="nav-items">
    <li className="nav-item">
        <Link
            activeClass="active"
            to="section1"
            spy={true}
            smooth={true}
            offset={-70}
            duration= {500}
            className="dot-link"
        >
        <FontAwesomeIcon icon={faCircle} className="solidCircle"/>
        <FontAwesomeIcon icon={farCircle} className="regularCircle"/>
        </Link>
    </li>
    <li className="nav-item">
        <Link
            activeClass="active"
            to="section2"
            spy={true}
            smooth={true}
            offset={-70}
            duration= {500}
            className="dot-link"
        >
        <FontAwesomeIcon icon={faCircle} className="solidCircle"/>
        <FontAwesomeIcon icon={farCircle} className="regularCircle"/>
        </Link>
    </li>
    <li className="nav-item">
        <Link
            activeClass="active"
            to="section3"
            spy={true}
            smooth={true}
            offset={-70}
            duration= {500}
            className="dot-link"
        >
        <FontAwesomeIcon icon={faCircle} className="solidCircle"/>
        <FontAwesomeIcon icon={farCircle} className="regularCircle"/>
        </Link>
    </li>
    </ul>
</div>

it works quite well. when scrolling, the previous section's dot becomes "unselected" and the dot for the current section becomes selected. is it possible to change this behavior so that previously passed through sections still have their dots lighted up as though it's active? so the result would be, as you scroll through, the dots light up until all the dots are lighted up when the last section is reached. at the moment, the scrolled through sections lose their "active" class and the currently being viewed section gets the active class. i was thinking another class would be used when the section has been passed through but i don't think there's an option for something like this

thanks

thanks

[fisshy]

Hey,

One possible solution could be to listen to onSetActive and you could handle that yourself.

let visited = false;

<Link
            activeClass="active"
            to="section3"
            spy={true}
            smooth={true}
            offset={-70}
            duration= {500}
            className=`dot-link ${ visited ? 'visited' : '' }`
            onSetActive={el => visited = true}
>