Bootstrap 4 Scrollspy

0 2574

Scrollspy allows you to automatically update Bootstrap navigation or list group components based on the scroll position to indicate which link is currently active (highlight the current position) in the viewport (currently on the page).

The Bootstrap scrollspy plugin requires the Bootstrap nav component, like navbar, nav tabs, or pills, and list for proper highlighting of active links. The element used with data-spy=" scroll" requires the CSS position property, with a value of "relative" to work properly.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap vertical navigation Scrollspy 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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
  <style>
  body {
    position: relative;
  }
  ul.nav-pills {
    top: 20px;
    position: fixed;
  }
  div.col-8 div {
    height: 330px;
  }
  .pd
  {
    padding-left: 15px;
  }
  .cus-class h1, .cus-class p
  {
   color: #fff;
  }
  .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: red;
}
  </style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="w-50 pd">
  <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="#Frist-Section">First Section</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#Second-Section">Second Section</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#Third-Section">Third Section</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#fourth-Section">Fourth Section</a>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9 col-8 cus-class">
      <div id="Frist-Section" class="bg-dark">
      <div class="p-5">
        <h1>First Section</h1>
        <p>Coding Tag is the E-learning website covering all aspects of technical and nontechnical tutorials including advanced programming, web Development languages, current affairs and Technical interviews question and Answers on C, C++, Python, PHP, CSS, AngularJS, MongoDB and on all latest trending technologies.</p>

        </div>
      </div>
      <div id="Second-Section" class="bg-primary">
         <div class="p-5">
        <h1>Second Section</h1>
         <p>Codingtag is the E-learning website covering all aspects of technical and nontechnical tutorials including advanced programming, web Development languages, current affairs and Technical interviews question and Answers on C, C++, Python, PHP, CSS, AngularJS, MongoDB and on all latest trending technologies.</p>
      </div>
      </div>
      <div id="Third-Section" class="bg-secondary">
       <div class="p-5">
        <h1>Third Section</h1>
       <p>Coding Tag is the E-learning website covering all aspects of technical and nontechnical tutorials including advanced programming, web Development languages, current affairs and Technical interviews question and Answers on C, C++, Python, PHP, CSS, AngularJS, MongoDB and on all latest trending technologies.</p>
      </div>
    </div>
      <div id="fourth-Section" class="bg-danger">
       <div class="p-5">
        <h1>Fourth Section</h1>
         <p>Coding Tag is the E-learning website covering all aspects of technical and nontechnical tutorials including advanced programming, web Development languages, current affairs and Technical interviews question and Answers on C, C++, Python, PHP, CSS, AngularJS, MongoDB and on all latest trending technologies.</p>
      </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>