Bootstrap 4如何在第二个词缀出现时删除第一个词缀答案

【问题标题】：Bootstrap 4 how to remove first affix when second affix comes to viewBootstrap 4如何在第二个词缀出现时删除第一个词缀
【发布时间】：2017-12-29 07:00:11
【问题描述】：

我正在使用 bootstrap 4 scrollspy 和自定义词缀。问题是当第二个菜单出现时，我需要删除第一个固定菜单。在这里检查小提琴https://jsfiddle.net/raj_mutant/awknd20r/ html:

<body data-spy="scroll" data-target=".navbar" data-offset="50">
<header>
    <div class="container">

    </div>
</header>
<section id="intro">
    <div class="container">
        <div class="jumbotron">
            <div class="container">
                <h2>Test</h2>
                <h1>Lorem Ipsum</h1>
                <h4>Lorem Ipsum</h4>
            </div>
        </div>
    </div>
</section>
<section>
    <nav class="tab-menu navbar navbar-expand-sm" data-toggle="affix">
        <ul class="navbar-nav">
            <li class="nav-link nav-item" href="#section1">
<a href="#">test</a>
            </li>
            <li class="nav-link nav-item" href="#section2">
<a href="#">test</a>
            </li>
            <li class="nav-link nav-item" href="#section3">
<a href="#">test</a>
            </li>
        </ul>
    </nav>

    <div class="section" id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">

    </div>
    <div class="section" id="section2" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">

    </div>
<section>

从上到下滚动都需要附加元素，反之亦然。提前致谢。

【问题讨论】：

“第二个菜单”是什么意思？第一个附加菜单应该在什么时候消失？谢谢！
第一个菜单是“tab-menu”类的菜单，第二个菜单是黑色背景的导航栏“bg-dark”jsfiddle.net/raj_mutant/awknd20r。当 bg-dark 菜单来查看 tab-menu 时仍然在固定的位置。这里我为 tab-menu 和 bg-dark 菜单使用相同的数据切换词缀。

标签： jquery twitter-bootstrap bootstrap-4 scrollspy

【解决方案1】：

我肯定会使用 Bootstrap 的.sticky-top 定位实用程序，而不是自定义的 javascript。据我了解您的问题，这涵盖了您想要的功能。这是一个工作示例：

section{
    padding: 2rem 0;
}
header .container{
    height:10vh;
    background:#dddddd;
}
.jumbotron {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    text-align: center;
}

.tab-menu{
    height:30vh;
    background: #f0f0f0;
}
.tab-menu ul{
    width:100%;
    display: flex;
    justify-content: center;
}
.tab-menu ul li.nav-item{
    background:#dddddd;
    height:30vh;
    width: 30%;
    margin:0px 5px;
}
.tab-menu ul li.active{
    background:#f4821f;
}
.section{
    height:100vh;
}
.lorem{
    width: 100%;
    background: #dddddd;
}

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<header>
    <div class="container">

    </div>
</header>
<section id="intro">
    <div class="container">
        <div class="jumbotron">
            <div class="container">
                <h2>Test</h2>
                <h1>Lorem Ipsum</h1>
                <h4>Lorem Ipsum</h4>
            </div>
        </div>
    </div>
</section>


<div id="first-menu-display">
    <!-- New place of first  menu within new `id="first-menu-display"` wrapper -->
    <nav class="tab-menu navbar navbar-expand sticky-top">
        <ul class="navbar-nav">
            <li class="nav-link nav-item" href="#sectionA1">
                <a href="#">test</a>
            </li>
            <li class="nav-link nav-item" href="#sectionA2">
                <a href="#">test</a>
            </li>
            <li class="nav-link nav-item" href="#sectionA3">
                <a href="#">test</a>
            </li>
        </ul>
    </nav>

    <section>
        <!-- Original place of first  menu -->
        <div class="section" id="sectionA1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
            <h1>Section 1</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div class="section" id="sectionA2" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
            <h1>Section 2</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div class="section" id="sectionA3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
            <h1>Section 3</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
    </section>


    <section class="lorem">
        <div class="container">
            <div class="jumbotron">
                <div class="container">
                    <h2>Test</h2>
                    <h1>Lorem Ipsum</h1>
                    <h4>Lorem Ipsum</h4>
                </div>
            </div>
        </div>
    </section>

    <section class="">
        <div class="container">
            <div class="jumbotron">
                <div class="container">
                    <h2>Test</h2>
                    <h1>Lorem Ipsum</h1>
                    <h4>Lorem Ipsum</h4>
                </div>
            </div>
        </div>
    </section>

    <section class="">
        <div class="container">
            <div class="jumbotron">
                <div class="container">
                    <h2>Test</h2>
                    <h1>Lorem Ipsum</h1>
                    <h4>Lorem Ipsum</h4>
                </div>
            </div>
        </div>
    </section>

    <section class="">
        <div class="container">
            <div class="jumbotron">
                <div class="container">
                    <h2>Test</h2>
                    <h1>Lorem Ipsum</h1>
                    <h4>Lorem Ipsum</h4>
                </div>
            </div>
        </div>
    </section>

    <section class="">
        <div class="container">
            <div class="jumbotron">
                <div class="container">
                    <h2>Test</h2>
                    <h1>Lorem Ipsum</h1>
                    <h4>Lorem Ipsum</h4>
                </div>
            </div>
        </div>
    </section>
</div>


<section>
    <nav class="navbar navbar-expand bg-dark navbar-dark sticky-top">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#sectionB1">Section 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#sectionB2">Section 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#sectionB3">Section 3</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    Section 4
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#sectionB41">Link 1</a>
                    <a class="dropdown-item" href="#sectionB42">Link 2</a>
                </div>
            </li>
        </ul>
    </nav>

    <div id="sectionB1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="sectionB2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="sectionB3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="sectionB41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 4 Submenu 1</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="sectionB42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 4 Submenu 2</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
</section>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/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.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

</body>

正如您在示例中看到的那样，我将第一个菜单稍微移动了一点，并将其包装成一个<div>，该<div> 一直延伸到第二个菜单。这使得第一个菜单在第二个菜单滚动到视图中时消失。
另外，请注意，为了让 Scrollspy 正常工作，请在第一个和第二个菜单中使用不同的 id（例如，您在两个菜单中都有 section1）。

【讨论】：