/Javascript/Bootstrap/Scrollspy bootstrap 5

Scrollspy bootstrap 5

Scrollspy bootstrap 4

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

Source: getbootstrap.com

Scrollspy bootstrap 5

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Source: getbootstrap.com

Similar codes

0 vote297 views1 answer
React bootstrap navbar align right buttons
Javascript Bootstrap
126 votes378 views5 answers
React Bootstrap css import
CSS Bootstrap
27 votes258 views5 answers
Angular bootstrap
Javascript Bootstrap
15 votes242 views3 answers
Bootstrap 4 tooltip
Javascript Bootstrap
0 vote238 views1 answer
Input area bootstrap highlight
CSS Bootstrap
1 vote262 views2 answers
How to navigate with navintems for react-bootstrap without refreshing the whole page
Javascript Bootstrap
5 votes249 views2 answers
Close bootstrap modal with javascript
Javascript Bootstrap
3 votes259 views9 answers
Bootstrap 5
Javascript Bootstrap
0 vote241 views1 answer
Bootstrap progress bar animation not working
CSS Bootstrap
2 votes261 views8 answers
Bootstrap 5
CSS Bootstrap