Bootstrap 4 scrollspy for nav item inside div 不工作

Question

我似乎无法让 scrollspy 工作。我在有时隐藏的 div 项中有一个导航项。这个导航项目需要有 scrollspy 工作。我不确定问题是与活动 class 还是其他问题有关。单击 link 时，它不会变为活动状态。滚动到该部分也不起作用。

主要-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;
}

...

Answer 1

问题是我缺少一个 #，div 数据间谍的样式，而活动的 class 属于 li 标签。

<div id="features-page" hidden=true data-spy="scroll" data-target="#features-navbar" data-offset="1" style="overflow-y: scroll; height: 100vh; position:relative;">

Bootstrap 4 scrollspy for nav item inside div 不工作

Bootstrap 4 scrollspy for nav item inside div not working

html

css

twitter-bootstrap

scrollspy

bootstrap-4