我正在嘗試將 [https://getbootstrap.com/docs/4.0/components/scrollspy][1] 實施到網站中。
要求是右側的導航點應根據滾動位置（引導程式滾動監視功能）更改顏色，并在單擊時更改顏色（請參閱 javascript 功能 - 此功能已經可用）。
但是 Scrollspy 不起作用：
- 我包含了所有需要的庫（bootstrap css & js、jquery、popper）
- 在
<body>有正確的引導和風格標簽 - 您可以
.cmp-anchorlist .anchorlist__link .active在 css 中找到它應該更改的類 - 在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>uj5u.com熱心網友回復：
首先，在使用資料屬性時，您不需要在 javascript 中顯式呼叫 scrollspy 函式：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 可以與導航或串列組一起使用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329269.html
標籤：javascript html css 卷轴间谍