div内导航项目的Bootstrap 4 scrollspy不起作用答案

【问题标题】：Bootstrap 4 scrollspy for nav item inside div not workingdiv内导航项目的Bootstrap 4 scrollspy不起作用
【发布时间】：2018-07-23 16:53:23
【问题描述】：

我似乎无法让 scrollspy 工作。我在有时隐藏的 div 项中有一个导航项。这个导航项目需要有滚动间谍功能。我不确定问题出在活动课程还是其他问题上。单击链接时，它不会变为活动状态。滚动到该部分也不起作用。

主页.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;
}

...

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 scrollspy

【解决方案1】：

问题是我缺少一个#，div data-spy 的样式和活动类属于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;">

【讨论】：