Bootstrap 4当第二个词缀出现时如何删除第一个词缀

时间：2017-12-29 07:00:11

标签： jquery twitter-bootstrap bootstrap-4 scrollspy

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

上下滚动需要附加元素，反之亦然。谢谢。

1 个答案:

答案 0 :(得分：1)

我肯定会使用Bootstrap的.sticky-top定位工具来代替自定义词缀javascript。据我了解你的问题，这涵盖了你想要的功能。这是一个有效的例子：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

相关问题
最新问题