bootstrap scrollspy

 <body data-spy="scroll" data-target=".navbar" data-offset="50">  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... <ul class="navbar-nav"> <li><a href="#section1">Section 1</a></li> ... </nav>  <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation bar while scrolling!</p> </div> ... </body>

bootstrap scrollspy

<!-- Bootstrap 5 Scrollspy -->
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
   <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-bs-toggle="dropdown"
            href="#"
            role="button"
            aria-expanded="false"
            >Dropdown</a
         >
         <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#one">one</a></li>
            <li><a class="dropdown-item" href="#two">two</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item" href="#three">three</a></li>
         </ul>
      </li>
   </ul>
</nav>
<div
   data-bs-spy="scroll"
   data-bs-target="#navbar-example2"
   data-bs-offset="0"
   tabindex="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>

Posted by: Guest on March-02-2021

Source

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3"> <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-bs-toggle="dropdown" href="#" role="button" aria-expanded="false" >Dropdown</a > <ul class="dropdown-menu dropdown-menu-end"> <li><a class="dropdown-item" href="#one">one</a></li> <li><a class="dropdown-item" href="#two">two</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="#three">three</a></li> </ul> </li> </ul> </nav> <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="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>

Code answers related to "bootstrap scrollspy"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Answers for "bootstrap scrollspy"

Code answers related to "bootstrap scrollspy"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us