Missing code for scrollspy?

So I was studying bootstrap scrollspy from W3schools and I decided to try making one of my own following the instruction given in W3schools. The colors and link work fine but the scrollspy did not work. I tried compared the codes of my with the codes in W3schools.

body {
      position: relative; 
}      
<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-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>




<body>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-md bg-warning navbar-warning fixed-top">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#s1">Section 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#s2">Section 2</a></li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="" data-toggle="dropdown" id="d1">Section 3</a>
      <div class="dropdown-menu">
         <a class="dropdown-item" href="#s3a">Section 3a</a>
         <a class="dropdown-item" href="#s3b">Section 3b</a>
      </div>
    </li>
  </ul>
</nav>

<div id="s1" class="container-fluid bg-primary" style="padding-top:100px;padding-bottom:100px;">
  <h1>Section 1</h1>
  <p>Construct paragraph here</p>
</div>

<div id="s2" class="container-fluid bg-secondary" style="padding-top:100px;padding-bottom:100px;">
  <h1>Section 2</h1>
  <p>Construct paragraph here</p>
</div>
<div id="s3a" class="container-fluid bg-danger" style="padding-top:100px;padding-bottom:100px;">
  <h1>Section 3a</h1>
  <p>Construct paragraph here</p>
</div>
<div id="s3b" class="container-fluid bg-info" style="padding-top:100px;padding-bottom:100px;">
  <h1>Section 3b</h1>
  <p>Construct paragraph here</p>
</div>









</body>

So the scrollspy (The effect that colors the link text in white when you scroll to a certain section) is not working here, the link text is still only blue text. Am I missing something here?

Thank You all in advance :)

1 answer

  • answered 2018-01-13 17:43 Manuel Blanco

    You have a syntax error in the a link tag.

      <a class="nav-link" dropdown-toggle” href="" data-toggle="dropdown" id="d1">Section 3</a>
      <div class="dropdown-menu">
    

    You can also do this by using jquery with javascript

       $("body").scrollspy({target: ".navbar-fixed-top"})
    

    Hope I had help :)