I'm utilizing bootstrap 5 as my CSS framework and currently working on a significant section. Therefore, I chose to structure it with one row containing four columns, hiding the others using Bootstrap's collapse feature. However, because this is a single-page website, I've implemented spyscroll along with a fixed navigation bar featuring an active class to keep track of the page number so users know where they are. The issue arises when I click on "show more" for the collapsed content. This causes the spyscroll functionality to behave erratically. Is there a way to resolve this? It should be noted that removing the active link resolves the spyscroll problem. So technically, there seems to be nothing inherently wrong with Bootstrap's spyscroll, but the presence of the active link appears to be causing the issues.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap ScrollSpy</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8282999e999f8c9dadd8c3ddc3df">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12707d7d66616660736252273c223c20">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
/* Custom style to stick list group on top */
.list-group {
position: sticky;
top: 15px;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-offset="15" data-bs-target="#myScrollspy">
{...rest of the code remains the same...}
</div>
</body>
</html>