I can't seem to get scrollspy to work. I have a nav item inside a div item that is hidden at times. This nav item needs to have scrollspy working. I'm not sure if the problem is with the active class or something else. When clicking a link it doesn't change to active. Scrolling to the section doesn't work either.
main-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- can be dropped but must appear because of bootstrap warning -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My title</title>
<link rel="stylesheet" href="styles.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> </script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- JavaScript code for this page -->
<script src="main_page.js"></script>
</head>
<body>
<!-- A navbar that is always on top -->
<nav class="navbar navbar-expand-sm fixed-top">...</nav>
<div class="container-fluid">
<!-- Content that shows up when navigating to the site or when the logo is clicked -->
<div id="landing-page">...</div>
<!-- Shows all the Features of this product -->
<div id="features-page" hidden=true data-spy="scroll" data-target="features-navbar" data-offset="1">
<div class="jumbotron features-jumbotron text-center">
something
</div>
<!-- Navbar in question -->
<nav class="navbar navbar-expand-sm justify-content-center sticky-top" id="features-navbar">
<div class="gray-border">
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link nav-button active" href="#lease-feature">Lease</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#finance-feature">Finances</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#organized-feature">Organized</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#community-feature">Community</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="feature-item" id="lease-feature">
lease-feature
<br/>
<br/>
<br/>
<br/>
<br/>
lease-feature end
</div>
<div class="feature-item" id="finance-feature">
Finance
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Finance end
</div>
<div class="feature-item" id="organized-feature">
organized
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
organized end
</div>
<div class="feature-item" id="community-feature">
community-feature
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
community-feature end
</div>
end
</div>
</div>
</body>
</html>
styles.css
body {
padding-top: 110px;
}
nav{
background-color: white;
}
.nav-button{
color: black;
}
.active{
border-left: 2px solid black;
}
.gray-border{
border-top: .1px solid #d9d9d9;
border-bottom: .1px solid #d9d9d9;
}
.feature-item{
padding-top: 220px;
}
...
The problem was that I was missing a #, styling for the div data-spy and the active class belongs to the li tag.
<div id="features-page" hidden=true data-spy="scroll" data-target="#features-navbar" data-offset="1" style="overflow-y: scroll; height: 100vh; position:relative;">