Bootstrap 4 Scrollspy Tutorial With Example

In Bootstrap 4 Scrollspy Tutorial With Example, you will learn how to create the scrollspy with Bootstrap 4. Scrollspy enables you to highlight the current position in a menu, based on the user scroll position. As the user scrolls down the page, the applicable menu item is highlighted, based one where the scroll position is.

Bootstrap 4 Scrollspy Tutorial With Example

The Bootstrap 4 scrollspy is a navigation menu that automatically highlights the navigation links based on the scroll position to indicate the visitor where they are currently on the page. The scrollspy will make your web page simple and accessible.

#1: Bootstrap 4 Scrollspy

To create the scrollspy, you must set the attribute and value data-spy=”scroll” to the scrollable area of the website. If you require it to apply for the whole page, then you should apply the attribute to the <body> element.

Then add the data-target attribute with the value of id or a class name of the navigation bar. That is to make sure that the navbar is connected with the scrollable area.

The last attribute on this element is optional data-offset. What it does is determining the number of pixels to offset from the top of the website, when scroll position is being calculated.

The default is 10 pixels.

Another thing is that scrollable elements must match the ID of the links inside the navigation bar list items.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Scrollspy Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<body data-spy="scroll" data-target=".navbar" data-offset="40">

<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="#part1">Part 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#part2">Part 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#part3">Part 3</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Part 4
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#part41">A</a>
        <a class="dropdown-item" href="part42">B</a>
      </div>
    </li>
  </ul>
</nav>

<div id="part1" class="container-fluid bg-info" style="padding-top:50px;padding-bottom:50px">
  <h1>Part 1</h1>
  <p>Hello Investmentnovel</p>
  <p>Hello Investmentnovel</p>
</div>
<div id="part2" class="container-fluid bg-success" style="padding-top:50px;padding-bottom:50px">
  <h1>Part 2</h1>
  <p>Hello Investmentnovel</p>
  <p>Hello Investmentnovel</p>
</div>
<div id="part3" class="container-fluid bg-secondary" style="padding-top:50px;padding-bottom:50px">
  <h1>Part 3</h1>
  <p>Hello Investmentnovel</p>
  <p>Hello Investmentnovel</p>
</div>
<div id="part41" class="container-fluid bg-warning" style="padding-top:50px;padding-bottom:50px">
  <h1>Part 4 Submenu 1</h1>
  <p>Hello Investmentnovel</p>
  <p>Hello Investmentnovel</p>
</div>
<div id="section42" class="container-fluid bg-danger" style="padding-top:50px;padding-bottom:50px">
  <h1>Part 4 Submenu 2</h1>
  <p>Hello Investmentnovel</p>
  <p>Hello Investmentnovel</p>
</div>
</body>
</html>

The example of a Bootstrap scrollspy will look like below screenshot.

Bootstrap 4 Scrollspy Example

#2: Bootstrap 4 Scrollspy Vertical Menu

It is also possible to work with a vertical menu.

You simply want to utilize the Bootstrap 4 grid system to divide the layout, so menu and content are not on top of one another.

In this case, the <nav> element does not have a .navbar class, so we set it as the data target by referring to an id of this element.

Next, to create a vertical pill menu by adding a .flex-column class to the navigation menus <ul> element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Scrollspy Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body data-spy="scroll" data-target="#scrollspy" data-offset="1">

<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-4" id="scrollspy">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#part1">Part 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#part2">Part 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#part3">Part 3</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Part 4</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#part41">A</a>
            <a class="dropdown-item" href="#part142">B</a>
          </div>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9 col-8">
      <div id="part1" class="bg-info">    
        <h1>Part 1</h1>
        <p>Hello Investmentnovel</p>
      </div>
      <div id="part2" class="bg-success"> 
        <h1>Part 2</h1>
        <p>Hello Investmentnovel</p>
      </div>        
      <div id="part3" class="bg-secondary">         
        <h1>Part 3</h1>
        <p>Hello Investmentnovel</p>
      </div>
      <div id="part41" class="bg-warning">         
        <h1>Part 4-1</h1>
        <p>Hello Investmentnovel</p>
      </div>      
      <div id="part42" class="bg-danger">         
        <h1>Part 4-2</h1>
        <p>Hello Investmentnovel</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

The example of a Bootstrap vertical scrollspy will look like below screenshot.

Bootstrap 4 Vertical Scrollspy Example

At last, our Bootstrap 4 Scrollspy Tutorial With Example is over.

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.