Bootstrap 4 - Scrollspy

Bootstrap 4 - Scrollspy is a very interesting feature in Bootstrap. Scrollspy is a bootstrap feature that can be used to automatically update the links in a navigation list on the basis of the current scroll position.

The scrollspy can be vertically positioned or horizontally positioned.

Example for Bootstrap 4 - Scrollspy (Horizontally Positioned):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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-dark navbar-dark fixed-top">  
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Division 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Division 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Division 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Division 4</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Division 4
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#section41">Sub - Division 1</a>
        <a class="dropdown-item" href="#section42">Sub - Division 2</a>
      </div>
    </li>
  </ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
  <h1>Division 1</h1>
  <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
  <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Division 2</h1>
  <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
  <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
  <h1>Division 3</h1>
  <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
  <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p>
</div>
<div id="section4" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Division 4</h1>
  <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
  <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p>
</div>
<div id="section5" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Division 5</h1>
  <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
  <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p>
</div>
<div id="section51" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
  <h1>Division 5  Sub - Division 1</h1>
  <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
  <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p>
</div>
<div id="section52" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
  <h1>Division 5 Submenu 2</h1>
  <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
  <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p>
</div>
</body>
</html>

Test it Now

The Explanation of this example would be:

The user has to add data-spy="scroll" to the element that has to be used as the scrollable area which is often the <body> element.

Then the user has to add the data-target attribute with a value of the id or the class name of the navigation bar which is the class .navbar. This is done in order to make sure that the navbar is connected with the scrollable area.

However, one should note that scrollable elements must match the ID of the links inside the navbar's list items (<div id="section1"> matches <a href="#section1">).

Moreover, in scrollspy, the optional data - offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. This is very useful and relevant when the user feels that the links inside the navbar changes the active state too soon or too early when jumping to the scrollable elements. By Default, it is 10 pixels.

The Output will be:

Example for Bootstrap 4 - Scrollspy (Vertically Positioned) :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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="#myScrollspy" data-offset="1">
 
<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-4" id="myScrollspy">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#section1">Division 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">Division 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">Division 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section4">Division 4</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Division 5</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#section51">Link 1</a>
            <a class="dropdown-item" href="#section52">Link 2</a>
          </div>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9 col-8">
      <div id="section1" class="bg-success">    
        <h1>Division 1</h1>
        <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
        <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p> 
      </div>
      <div id="section2" class="bg-warning"> 
        <h1>Division 2</h1>
        <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
        <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p> 
      </div>        
      <div id="section3" class="bg-secondary">         
        <h1>Division 3</h1>
        <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
        <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p> 
      </div>
      <div id="section4" class="bg-info">         
        <h1>Division 4</h1>
        <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
        <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p> 
      </div>
      <div id="section51" class="bg-danger">         
        <h1>Division 5 - 1</h1>
        <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
        <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p> 
      </div>      
      <div id="section52" class="bg-dark">         
        <h1>Division 5 - 2</h1>
        <p>When a user scrolls through this section, the navigation bar will stay at the same position.</p>
        <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p> 
      </div>
    </div>
  </div>
</div>
</body>
</html>

Test it Now

The Output will be:

Next TopicBootstrap 4 tooltip

← prev next →