Question

我有一个接一个的部分，在它们的中间我没有锚导向它。问题是，在上一节中，scrollspy处于活动状态。我想让scrolllspy在该点没有显示任何活动，并在下一个带有效锚点的部分出现时恢复。我正在尝试来自Exclude ID in Twitter Bootstrap Scrollspy的解决方案，但它们似乎在引导程序4中不起作用，我甚至无法捕获触发器，假设通过这样做：

login

如果只有当导航链接中的id与滚动元素的id匹配时，如何使scrollspy起作用，不包括其他元素？

a）（部分帮助）如何捕捉scrollspy射击事件？

Answer 1

这看起来有点像hackish，但我认为这是实现所需行为的唯一方法，而无需修改scrollspy javascript本身。

这里的想法是为旁边的元素创建锚点，但隐藏这些锚点。由于菜单项的顺序对于scrollspy并不重要，因此可以将这些“不必要的”菜单项分组并包装到单个隐藏的父元素中。请查看下面的代码段。

#content {
    position: relative;
    overflow-y: scroll;
    height: 100vh;
}

/* Just basic styling */
#content > div {
    height: 50vh;
    padding: 15px;
}
#content > div:nth-child(2n) {
    background-color: lightgrey;
}
#content > div:last-child {
    height: 100vh;
}
.aside {
    background-color: pink !important;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-3">
            <nav id="navbar-scollspy" class="navbar navbar-light bg-light flex-column">
                <a class="navbar-brand" href="#">Navbar</a>

                <nav class="nav nav-pills flex-column">
                    <a class="nav-link" href="#section-1">Section 1</a>
                    <a class="nav-link" href="#section-2">Section 2</a>
                    <a class="nav-link" href="#section-3">Section 3</a>
                    <a class="nav-link" href="#section-4">Section 4</a>

                    <!-- Hidden menu items for asides -->
                    <div class="d-none">
                        <a class="nav-link" href="#aside-1">Aside 1</a>
                        <a class="nav-link" href="#aside-2">Aside 2</a>
                    </div>
                </nav>
            </nav>
        </div>

        <div id="content" class="col-9" data-spy="scroll" data-target="#navbar-scollspy">
            <div id="section-1">
                <h4>Section 1</h4>
                <p>...</p>
            </div>
            
            <div id="aside-1" class="aside">
                <h4>Aside 1</h4>
                <p>...</p>
            </div>
            
            <div id="section-2">
                <h4>Section 2</h4>
                <p>...</p>
            </div>
            
            <div id="aside-2" class="aside">
                <h4>Aside 2</h4>
                <p>...</p>
            </div>

            <div id="section-3">
                <h4>Section 3</h4>
                <p>...</p>
            </div>

            <div id="section-4">
                <h4>Section 4</h4>
                <p>...</p>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

顺便说一句，你可以在spied元素（activate.bs.scrollspy）或任何父元素上监听[data-spy="scroll"]事件，包括$（'body'）和$（document），如下所示：

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function(event) {
    console.log('activate.bs.scrollspy', event);
})

Bootstrap 4 scrollspy不包括id＆＃39; s

1 个答案: