Skip to main content
 首页 » 编程设计

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

2026年07月28日8kenshinobiy

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

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

请您参考如下方法:

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

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


  文章来源：
  https://blog.windname.com/post/aejfjj2b1.html
阅读延展