Menu fixo no topo após o div de cima passar?

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

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

Eu quero que depois que o banner1 saia da tela (quando o menu chega ao topo) o menu se fixe no topo da tela, alguém pode poooor favor me dar uma ajuda? Obrigada <3