Bootstrap Scrollspy 不起作用 - 缺少什么？

Question

我正在尝试将 [https://getbootstrap.com/docs/4.0/components/scrollspy][1] 实施到网站中。
要求是右侧的导航点应根据滚动位置更改颜色（bootstrap scrollspy 功能）并在单击时更改颜色（请参阅 javascript 功能 - 这个已经有效）。

但是 Scrollspy 不起作用：

我包含了所有需要的库（bootstrap css & js、jquery、popper）
<body> 有正确的 bootstrap 和样式标签
您可以在 css

.cmp-anchorlist .anchorlist__link .active

在 JS（最后一行）中添加了用于激活 scrollspy 功能的函数

谁能告诉我我漏掉了什么？

非常感谢！

$(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>

Answer 1

首先，当您使用数据属性时，您不需要在 javascript 中显式调用 scrollspy 函数：https://getbootstrap.com/docs/4.0/components/scrollspy/#usage

我认为你根本不需要给定的 JavaScript。

你的 scrollspy 没有工作，因为你没有将 .nav-link class 添加到你的 links。

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

这应该可以解决您的问题，因为 scrollspy 可以与导航或列表组一起使用。

Bootstrap Scrollspy 不起作用 - 缺少什么？

Bootstrap Scrollspy does not work - what is missing?

html

javascript

css

scrollspy