CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
xAos
xAos

Reputation: 119

Bootstrap 4 Scrollspy not indicating on scroll

I want to implement a bootstrap scrollspy. I think that I successfully implemented it, but it's not working. My menu items based on scroll position do not indicate. The active class is not added to the anchors. Can someone tell me where I am wrong and what to change in my code ?

ul {
  list-style:none;
  padding: 0;
}
.scroll-area {
  margin-top: 30px;
  height: 250px;
  position: relative;
  overflow: auto;
}
.scroll-area div {
  height: 300px;
    color: #fff;
}
.scroll-area div:first-child { background: green; }
.scroll-area div:nth-child(2) {background: purple;}
.scroll-area div:nth-child(3) {background: orange;}
.scroll-area div:nth-child(4) {background: blue;}
.scroll-area div:nth-child(5) {background: black;}

#main-nav li {
  display: inline-block;
  margin-right: 30px;
}
#main-nav li a {
  color: #000;
}

#main-nav li a.active {
  color: tomato;
}
<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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-3">
      <nav id="main-nav">
        <ul class="nav">
          <li><a href="#a" class="active">Link1</a></li>
          <li><a href="#b">Link2</a></li>
          <li><a href="#c">Link3</a></li>
          <li><a href="#d">Link4</a></li>
          <li><a href="#e">Link5</a></li>
        </ul>
      </nav>
    </div>
    <div class="col-9">
          <div class="scroll-area" data-spy="scroll" data-target="#main-nav" data-offset="0">
          <div id="a">Austria</div>
          <div id="b">Bolivia</div>
          <div id="c">Canada</div>
          <div id="d">Denmark</div>
          <div id="e">England</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 230

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

The Scrollspy component looks for the nav-link class...

   <ul class="nav">
      <li><a href="#a" class="nav-link active">Link1</a></li>
      <li><a href="#b" class="nav-link">Link2</a></li>
      <li><a href="#c" class="nav-link">Link3</a></li>
      <li><a href="#d" class="nav-link">Link4</a></li>
      <li><a href="#e" class="nav-link">Link5</a></li>
   </ul>

Demo: https://codeply.com/p/tqHAOdCNVZ

Upvotes: 1

Related Questions