Bootstrap 4 如何在看到第二个词缀时删除第一个词缀

Question

我正在使用 bootstrap 4 scrollspy 和自定义 affix.Problem 是当第二个菜单出现时我需要删除第一个固定菜单。在这里检查 fiddle 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>

上下滚动和副滚动都需要附加元素versa.Thanks。

Answer 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>，它一直向下延伸到第二个菜单。这使得第一个菜单在第二个菜单滚动到视图中时消失。
另外，请注意，为了让 Scrollspy 正常工作，请在第一个和第二个菜单中使用不同的 ID（例如，您在两个菜单中都有 section1）。

Bootstrap 4 如何在看到第二个词缀时删除第一个词缀

Bootstrap 4 how to remove first affix when second affix comes to view

jquery

twitter-bootstrap

scrollspy

bootstrap-4