Search code examples
javascripthtmlcssscrollspy

Bootstrap Scrollspy does not work - what is missing?


I am trying to implement the [https://getbootstrap.com/docs/4.0/components/scrollspy][1] into a website.
The requirement is that the navigations dots at the right side should change the color depending from scroll position (bootstrap scrollspy feature) and change the color if clicked (see javascript function - this one works already).

But Scrollspy does not work:

  • I included all needed libraries (bootstrap css & js, jquery, popper)
  • The <body> has the right bootstrap and style tags
  • You can find the .cmp-anchorlist .anchorlist__link .active class to which it should change in css
  • Added the function in JS (last line) for activating the scrollspy function

Could anyone tell me what point I am missing?

Thank you very much!

$(document).ready(function () {
  $("li > a.anchorlist__link").click(function () {
    $("li > a.anchorlist__link").find("anchorlist__link").removeClass("anchorlist__link");
    $(this).addClass("anchorlist__link");
    $("li > a.anchorlist__link").css('background-color', '#ffffff');
    $(this).css('background-color', '#f08200');
  });
});
$('body').scrollspy({ target: '#navbar-right' , offset: 50});
body{
  position:relative
}
.cmp-anchorlist {
  position: fixed;
  right: 1em;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
@media screen and (max-width: 640px) {
  .cmp-anchorlist {
    /* display: none; */
  }
}
.cmp-anchorlist .anchorlist__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cmp-anchorlist .anchorlist__item {
  margin-bottom: 1em;
}
.cmp-anchorlist .anchorlist__item:last-child {
  margin-bottom: 0;
}
.cmp-anchorlist .anchorlist__link {
  background-color: #ffffff;
  border: 1px solid #707172;
  display: block;
  height: 1em;
  position: relative;
  transition: border 0.2s ease-out, background-color 0.2s ease-out;
  width: 1em;
}
.cmp-anchorlist .anchorlist__link:focus {
  outline: 0;
}
.cmp-anchorlist .anchorlist__link:hover {
  border-color: #f08200;
}
.cmp-anchorlist .anchorlist__link:hover .anchorlist__label,
.cmp-anchorlist .anchorlist__link:hover::before {
  opacity: 1;
  pointer-events: auto;
}


.cmp-anchorlist .anchorlist__link.active {
  background-color: #f08200;

}


.cmp-anchorlist .anchorlist__link::before {
  background-color: #f08200;
  content: '';
  display: block;
  height: 1px;
  left: -1.9375em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transition: 0.3s opacity;
  width: 1.25em;
}
.cmp-anchorlist .anchorlist__label {
  color: #707172;
  display: block;
  font-size: 0.9375em;
  opacity: 0;
  position: absolute;
  right: 100%;
  pointer-events: none;
  text-align: right;
  top: 0.6em;
  transition: 0.3s opacity;
  transform: translate(-3.125em, -50%);
  white-space: nowrap;
}

@media print {
  .cmp-anchorlist .anchorlist__item {
    display: none;
  }
}

.cmp-backtotop {
  margin-top: 0px;
}
.backtotop__anchor {
  background-color: #f0f0f0;
  color: #f08200;
  display: inline-block;
  padding: 8px;
}

@media print {
  .cmp-backtotop {
    display: none;
  }
}
<head>
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
 
</head>

<body data-spy="scroll" data-target="#navbar-right" data-offset="50" style="overflow-y: scroll;height: 1500px;">
  <nav class="cmp-anchorlist" id="navbar-right">

    <ul class="anchorlist__list">
      <li class="anchorlist__item">
        <a href="#oben" class="anchorlist__link" title="Seitenanfang">

          <span class="anchorlist__label">Seitenanfang</span>
        </a>
      </li>
      <li class="anchorlist__item">
        <a href="#terms" class="anchorlist__link" title="Ausstattungsmerkmale">

          <span class="anchorlist__label">Ausstattungsmerkmale</span>
        </a>
      </li>
    </ul>
  </nav>

  <div id="oben">
    hier ist oben
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br> <br><br><br><br><br><br><br><br>
  </div>
  <div id="terms">
    hier ist terms
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br> brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br> brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
  </div>

   <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>



</body>

Solution

  • First of all you dont need to call the scrollspy function explicit in javascript while you are working with the data-attributes: https://getbootstrap.com/docs/4.0/components/scrollspy/#usage

    I think you don't need your given JavaScript at all.

    Your scrollspy isn't working because u didn't add the .nav-link class to your links.

    <a href="#oben" class="anchorlist__link nav-link" title="Seitenanfang">
<a href="#terms" class="anchorlist__link nav-link" title="Ausstattungsmerkmale">

    This should fix your problem because the scrollspy is build to work with either a nav or a list-group.