Bootstrap 4 how to remove first affix when second

2019-04-30 03:19发布

站内问答 / jQuery
1163 1 6

I am using bootstrap 4 scrollspy and customized affix.Problem is when second menu comes to view i need to remove the first fixed menu. Check the fiddle here 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>

Need affix element for both top to bottom scroll and vice versa.Thanks in advance.

1条回答
We Are One
2楼-- · 2019-04-30 03:24

Instead of a custom affix javascript, I would definitely go with the .sticky-top positioning utility of Bootstrap. As far as I understand your question, that covers the functionality you want. Here is a working example:

section{
    padding: 2rem 0;
}
header .container{
    height:10vh;
    background:#ffffdffffd;
}
.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:#ffffdffffd;
    height:30vh;
    width: 30%;
    margin:0px 5px;
}
.tab-menu ul li.active{
    background:#f4821f;
}
.section{
    height:100vh;
}
.lorem{
    width: 100%;
    background: #ffffdffffd;
}
<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>

As you see in the example, I've moved the first menu a bit and wrapped it to a <div> that spans down until the second menu. This makes the first menu disappear just when the second menu scrolls into view.
Also, please note that in order to let the Scrollspy work correctly, use different ids in the first and the second menu (e.g. you had section1 in both).

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)