CODEWITHSUNDEEP
javascripthtmlcssscrollspy
aTuring
aTuring

Reputation: 47

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:

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>

Upvotes: 0

Views: 709

Answers (1)

tbs
tbs

Reputation: 139

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.

Upvotes: 1

Related Questions