Bootstrap 4 Scrollspy affix with two menus

Bootstrap 4 Scrollspy affix with two menus each fixing to top when it comes to view

by raj_mutant

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<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"...

CSS

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;
        }