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 .activeclass 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>CodePudding user response：
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.