scrollspy bootstrap 4

<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<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>

<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>

View another examples Add Own solution

3.67

Autotune 150 points

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

Thank you! 3

3.67 (3 Votes)

4.25

Worthy Null 85 points

                                    &lt;!-- Bootstrap 5 Scrollspy --&gt;
&lt;nav id=&quot;navbar-example2&quot; class=&quot;navbar navbar-light bg-light px-3&quot;&gt;
   &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
   &lt;ul class=&quot;nav nav-pills&quot;&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
         &lt;a class=&quot;nav-link&quot; href=&quot;#fat&quot;&gt;@fat&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
         &lt;a class=&quot;nav-link&quot; href=&quot;#mdo&quot;&gt;@mdo&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;nav-item dropdown&quot;&gt;
         &lt;a
            class=&quot;nav-link dropdown-toggle&quot;
            data-bs-toggle=&quot;dropdown&quot;
            href=&quot;#&quot;
            role=&quot;button&quot;
            aria-expanded=&quot;false&quot;
            &gt;Dropdown&lt;/a
         &gt;
         &lt;ul class=&quot;dropdown-menu dropdown-menu-end&quot;&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#one&quot;&gt;one&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#two&quot;&gt;two&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;hr class=&quot;dropdown-divider&quot; /&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#three&quot;&gt;three&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/li&gt;
   &lt;/ul&gt;
&lt;/nav&gt;
&lt;div
   data-bs-spy=&quot;scroll&quot;
   data-bs-target=&quot;#navbar-example2&quot;
   data-bs-offset=&quot;0&quot;
   tabindex=&quot;0&quot;
&gt;
   &lt;h4 id=&quot;fat&quot;&gt;@fat&lt;/h4&gt;
   &lt;p&gt;...&lt;/p&gt;
   &lt;h4 id=&quot;mdo&quot;&gt;@mdo&lt;/h4&gt;
   &lt;p&gt;...&lt;/p&gt;
   &lt;h4 id=&quot;one&quot;&gt;one&lt;/h4&gt;
   &lt;p&gt;...&lt;/p&gt;
   &lt;h4 id=&quot;two&quot;&gt;two&lt;/h4&gt;
   &lt;p&gt;...&lt;/p&gt;
   &lt;h4 id=&quot;three&quot;&gt;three&lt;/h4&gt;
   &lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;

Thank you! 8

4.25 (8 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Other

Other 2023-03-27 22:50:10 how to select the whole line in vscode with keyboard shortcut
Other 2022-03-27 22:45:24 income of a web developer
Other 2022-03-27 22:35:01 \pyrcc_main.py: File does not exist 'resources.qrc'
Other 2022-03-27 22:30:45 rick roll embed code
Other 2022-03-27 22:20:08 Circuit_04_Potentiometer
Other 2022-03-27 22:20:05 iterative power
Other 2022-03-27 22:15:11 flutter run all
Other 2022-03-27 22:10:05 when is karlson release
Other 2022-03-27 22:10:02 wp .htaccess example
Other 2022-03-27 22:00:08 bash pause in file read line by line

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

scrollspy bootstrap 4

Welcome Back!

Create a Free Account