Bootstrap Scrollspy不工作-缺少什么?

我正试图实现[https://getbootstrap.com/docs/4.0/components/scrollspy][1]到一个网站。

要求是右边的导航点应该根据滚动位置改变颜色(bootstrap scrollspy功能)，并在点击时改变颜色(参见javascript函数-这个已经工作了)。但是Scrollspy不工作:

我包含了所有需要的库(bootstrap css &js, jquery, popper)
<body>有正确的引导和样式标签
你可以在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>

首先，你不需要调用scrollspy函数显式在javascript中，而你正在使用的数据属性:https://getbootstrap.com/docs/4.0/components/scrollspy/#usage

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

你的scrollspy不工作，因为你没有添加。nav-link类到你的链接。

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

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

相关内容

最新更新

热门标签：