epfl-si/epfl-theme-elements

Automatic update a navigation bar with sticky-top

Closed this issue · 1 comments

dasv74 commented

I'm trying to code a horizontal navigation bar (stick-top option) as shown in the example. page:https://epfl-si.github.io/elements/#/pages/people-detail
The "active" item is underlined in red.

In my code, I define the first one as active, it is always underline in red, it is never changed when I select others items or when I am scrolling down, What shall I do?

Thank you

<!doctype html>

<div class="container sticky-top">
  <nav class="nav-tabs-light-wrapper" id="intermediate-nav">
    <ul class="nav nav-tabs-light">
      <li class="nav-item"><a class="nav-link active" href="#blue">Blue</a></li>
      <li class="nav-item"><a class="nav-link" href="#green">Green</a></li>
      <li class="nav-item"><a class="nav-link" href="#red">Red</a></li>
    </ul>
  </nav>
</div>

<div class="container mb-5">
  <div id="blue" style="background-color:blue;">
    <h1>blue<br>blue<br>blue<br>blue<br>blue<br>blue</h1>
  </div>
</div>

<div class="container mb-5">
  <div id="green" style="background-color:green;">
    <h1>green<br>green<br>green<br>green<br>green<br>green<br>green<br>green<br>green<br>green</h1>
  </div>
</div>

<div class="container mb-5">
  <div id="red" style="background-color:red;">
    <h1>Red</br>Red</br>Red</br>Red</br>Red</br>Red</br>Red</br>Red</br>Red</br>Red</br>Red</h1>
    <h1>Red</br>Red</br>Red</br>Red</br>Red</br>Red</br>Red</br>Red</br>Red</br>Red</br>Red</h1>
  </div>
</div>
<script src="js/elements.min.js"></script>
williambelle commented

To easily add scrollspy behavior to your navigation bar, add data-spy="scroll" to the <body>. Then add the data-target attribute with the ID of the .nav component.

<body data-spy="scroll" data-target="#intermediate-nav" data-offset="44">

(data-offset: pixels to offset from top when calculating position of scroll.)