How do I get the menu fixed at the top from when you just passed the previous div (which is in percentage)?

Question

.banner1{
    background-image: url(../images/bannertemplates.png);
    background-repeat: no-repeat;
    width:100%;
	height:100%;
    background-size:cover;
    background-attachment: fixed;
	position:absolute;
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.menu,
.sub-menu {
    list-style: none;
    background: #000;
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	position:absolute;
	width:100%;
	top:100%;
}

<div class="banner1"></div>
<ul class="menu clearfix">
		<li><a href="#">xxxx</a></li>
        <li><a href="#">xxxx</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">xxxx</a></li>
                <li><a href="#">xxxx</a></li>
                <li><a href="#">xxxx</a>
				<!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">xxxx</a></li>
                        <li><a href="#">xxxx</a></li>
                        <li><a href="#">xxxx</a>
						<!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">xxxx</a></li>
                                <li><a href="#">xxxx</a></li>
                                <li><a href="#">xxxx</a></li>
                            </ul></li><!-- submenu do submenu do submenu -->
                    </ul></li><!-- submenu do submenu -->
            </ul><!-- submenu -->
        </li>
        <li><a href="#">xxxx</a></li>
        <li><a href="#">xxxx</a></li>
		<li><a href="#">xxxx</a></li>
    </ul>

I want after the banner 1 leaves the screen (when the menu reaches the top) the menu to set at the top of the screen