Change menu with CSS

I'm developing an application where I would like when I rolled the page bar to the middle of the page there would appear a floating menu that would be fixed at the top of the page but I do not know how to do it.

Normal page

NormalPageHTML

<divclass="menu_superior">
    <div class="row">

        <div class="col-sm-8">

            <ul class="top">
                <li><i class="fa fa-phone"></i> 8744-3399</li>
                <li><i class="fa fa-envelope"></i> teste#hotmail.com</li>    
            </ul>
        </div>
        <div class="col-sm-4">
            <ul class="redes_sociais">
                <li><i class="fa fa-facebook" action="" ></i></li>
                <li><i class="fa fa-twitter" action=""></i></li>
                <li><i class="fa fa-linkedin" action=""></i></li>
                <li><i class="fa fa-dribbble" action=""></i></li>
                <li><i class="fa fa-google-plus" action=""></i></li>
            </ul>
        </div>

    </div>
</div>

Menu that you would like to appear at the top of the page when scrolling the page bar to the middle of the page

HTMLofthemenuthatyouwouldliketohavebeensetatthetopofthepagewhenscrollingthepagebartothemiddleofthepage.

<divclass="header-fixed2">
   <div class="row">
      <div class="col-xs-3 col-sm-3" >
         <img src="imagens/kalunga.JPG" style="width:180px;" class="imagem_empresa2">
      </div>
      <div class="col-xs-4 col-sm-4">
         <div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto2"><i class="fa fa-search" action="" ></i></button> </div>
      </div>
      <div class="col-xs-5 col-sm-5"> 
         <div class="dropdown">
            <div class="dropbtn">
               <c:choose>
                  <c:when test="${empty param.nome}">
                  <img src="imagens/pessoa2.png" alt="usuario" class="imagem_usuario"> Entre/Cadastre-se<span class="caret"></span>
                  </c:when>    
                  <c:otherwise>
                     <p>${param.nome}</p> 
                  </c:otherwise>
               </c:choose>
            </div>
            <div class="dropdown-content">
               <li><a href="#"><i class="fa fa-laptop"></i> Meus Pedidos</a></li>
               <li><a href="#"><i class="fa fa-gear"></i> Meus Dados</a></li>
               <li><a href="#"><i class="fa fa-group"></i> Fale Conosco</a></li>
               <li><a href="Logout"><i class="fa fa-group"></i> Sair</a></li>
               <li><a href="#"> Não é Cadastrado?Cadastre-se</a></li>
               <li><a href="#"><button type="button" onclick="" class="btn_entrar" >Entrar</button> </a></li>
            </div>
         </div>
         <div class="col-xs-4 col-sm-4">
            <div id="carrinho2">
               <a href="#"><img src="imagens/carrinho2.png" class="carrinho2">()itens</a>
            </div>
         </div>
      </div>
   </div>
</div>

CSS

.header-fixed2{
   background-color: white;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 999;
   width: 100%;
   display: none;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   height: 74px;
   display: block;
}

.buscar_produto2{
   border: 0px solid;
   border-radius: 0px 5px 5px 0px;
   color:#C0C0C0;
   height: 33px;
   width: 40px;
   float: left;
   background-color:black;
   color:#ffffff;
}

.imagem_empresa2{
}

#carrinho2{
   margin-top: 20px;
}

#carrinho2 a{
   color:black !important;
   font-size: 12pt;
   margin-bottom: 20px;
}

#carrinho2 a:hover{
   color:black !important;
   font-size: 12pt;
}

UPDATE There is an error when loading the page it shows both my at the same time, being that when I load the page it shows the blue menu and when I scroll the scroll bar shows the second menu