Items highlighted as active simultaneously when they are anchor links on the same page

[cptncrnch]

I'm currently using middleman-bootstrap-navbar to navigate a single scrolling page with anchor links that jump to sections on the page. I've realized that when the page loads initially, all of the anchor links are highlighted. None of the anchor tags have been reached when you're at the top of the page. As I scroll down, the correct item becomes active and continues to behave as expected throughout the page. When I return to the top, none of the items are highlighted (which is expected). When I reload the page, all anchor link items are again highlighted active.

Inspecting the page source code, I see when the page is first loaded that each <li> element has the class: "active" parameter.

<ul class="nav navbar-nav navbar-right">
      <li class="active">
      <a href="#home">
        Home
      </a>
    </li>
    <li class="active">
      <a href="#about">
        About
      </a>
    </li>
    <li class="active">
      <a href="#contact">
        Contact
      </a>
    </li>
</ul>

Is there a way to test for anchor links and have active items highlighted accordingly?

[manuelmeurer]

Hi @cptncrnch, thanks for reporting this! I've never used this on a SPA with just anchor links, or if I did, I simply ignored the active classes. The problem is that the decision about whether a menu item is marked as active, is made when the menu is rendered, so we can't check whether a certain div is in the viewport. Are you using Scrollspy to mark the menu items as active when you scroll down? If so, is there some way to trigger this immediately once the page is loaded (before scrolling), so all the active classes are removed?

[manuelmeurer]

I'll close this for now. Feel free to reopen if you still have this problem!