Bootstrap 4 | Scrollspy - GeeksforGeeks

27 Jul, 2021
Sometimes while designing the website, we include some attractive features which makes website eye-catching. One of the features is Bootstrap scrollspy which target the navigation bar contents automatically on scrolling the area.Create scrollspy: The data-spy=”scroll” and data-target=”.navbar” attribute is used to create scrollspy element. The scrollspy is used to update the navigation links when scrolling the page.
Example:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Scrollspy</title>         <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script>          <style>        body {            position: relative;        }    </style></head> <body data-spy="scroll" data-target=".navbar" data-offset="50">         <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-top">                 <ul class="navbar-nav">            <li class="nav-item">                <a class="nav-link" href="#content1">Home</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#content2">Algo</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#content3">DS</a>            </li>                             <li class="nav-item dropdown">                <a class="nav-link dropdown-toggle" href="#"                        id="navbardrop" data-toggle="dropdown">                    Languages                </a>                                         <div class="dropdown-menu">                    <a class="dropdown-item" href="#content4">C</a>                    <a class="dropdown-item" href="#content5">C++</a>                </div>            </li>        </ul>    </nav>         <div id="content1" class="container-fluid bg-primary"            style="height:250px; padding-top:80px;">        <h1>GeeksforGeeks</h1>          <p>A computer science portal for geeks</p>      </div>             <div id="content2" class="container-fluid bg-light"            style="height:250px; padding-top:80px;">        <h1>Algorithm Analysis</h1>          <p>A stepwise procedure to solve a problem</p>      </div>             <div id="content3" class="container-fluid bg-warning"            style="height:250px; padding-top:80px;">        <h1>Data Structure</h1>          <p>            Data structure is a particular way to organizing the data            in computer memory so that it can be used efficiently.        </p>      </div>         <div id="content4" class="container-fluid bg-info"            style="height:250px; padding-top:80px;">        <h1>C Languages</h1>          <p>            C is a computer science programming language        </p>      </div>         <div id="content5" class="container-fluid bg-dark"            style="height:250px; padding-top:80px;">        <h1>C++ Languages</h1>          <p>            C++ is the extension of C language.        </p>      </div></body> </html>                   
Output:  
Scrollspy Vertical Menu: It creates vertical navigation menu and the content are display according to the menu.  
html
<!DOCTYPE html><html lang="en"><head>    <title>Scrollspy</title>         <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script>         <style>        body {            position: relative;        }        ul.nav-pills {            top: 20px;            position: fixed;        }        div.col-8 div {            height: 500px;        }    </style></head> <body data-spy="scroll" data-target="#GFG_scrollspy" data-offset="1">         <div class="container-fluid">        <div class="row">                         <nav class="col-sm-4 col-4" id="GFG_scrollspy">                         <ul class="nav nav-pills flex-column">                    <li class="nav-item">                        <a class="nav-link active" href="#content1">                            Home                        </a>                    </li>                                             <li class="nav-item">                        <a class="nav-link" href="#content2">                            Algo                        </a>                    </li>                                             <li class="nav-item">                        <a class="nav-link" href="#content3">                            DS                        </a>                    </li>                                             <li class="nav-item dropdown">                        <a class="nav-link dropdown-toggle" href="#"                                id="navbardrop" data-toggle="dropdown">                            Languages                        </a>                                                         <div class="dropdown-menu">                            <a class="dropdown-item"                               href="#content4">C</a>                             <a class="dropdown-item"                               href="#content5">C++</a>                        </div>                    </li>                </ul>            </nav>                 <div class="col-sm-8 col-8">                <div id="content1" class="container-fluid bg-primary"                            style="height:250px; padding-top:80px;">                    <h1>GeeksforGeeks</h1>                      <p>A computer science portal for geeks</p>                  </div>                         <div id="content2" class="container-fluid bg-light"                            style="height:250px; padding-top:80px;">                    <h1>Algorithm Analysis</h1>                      <p>A stepwise procedure to solve a problem</p>                  </div>                                     <div id="content3" class="container-fluid bg-warning"                            style="height:250px; padding-top:80px;">                    <h1>Data Structure</h1>                      <p>                        Data structure is a particular way to organizing                        the data in computer memory so that it can be                        used efficiently.                    </p>                  </div>                                 <div id="content4" class="container-fluid bg-info"                            style="height:250px; padding-top:80px;">                    <h1>C Languages</h1>                      <p>                        C is a computer science programming language                    </p>                  </div>                                 <div id="content5" class="container-fluid bg-dark"                            style="height:250px; padding-top:80px;">                    <h1>C++ Languages</h1>                      <p>                        C++ is the extension of C language.                    </p>                  </div>            </div>        </div>    </div></body> </html>                               
Output:  
 Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ruhelaa48
ysachin2314
Bootstrap-4
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
How to Show Images on Click using HTML ?
How to align button to right side of text box in Bootstrap?
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?