Change menu with CSS

Question

I am developing an application where I would like when scrolling the page bar until half the page a floating menu appears that is fixed at the top of the page but I do not know how to do.

Regular page

HTML of the normal page

  <div class="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 fixed at the top of the page when you scroll the page bar to half the page

Menu HTML that you would like to appear fixed at the top of the page when scrolling the page bar to half the page.

<div class="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 An error occurs when loading the page it shows both of mine at the same time, being that when loading the page show the blue menu and when I scroll the scroll bar shows the second menu

Answer 1

This is a functional example that you should apply to your code. The second menu with class header-fixed2 must be hidden with display: none;. When scrolling the screen to half, the first menu will hide and the second one will appear:

$(window).on("scroll load",function(){
   var scrlTopo = $(window).scrollTop();
   var altJanela = window.innerHeight;
   if(scrlTopo >= altJanela/2){
      $(".header-fixed").hide();
      $(".header-fixed2").show();
   }else{
      $(".header-fixed").show();
      $(".header-fixed2").hide();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-fixed" style="display: block; float: left; width: 100%; height: 50px; background: red; position: fixed; top: 0; left: 0; z-index: 9999;">
   menu 1
</div> 

<div class="header-fixed2" style="display: block; float: left; width: 100%; height: 50px; background: yellow; position: fixed; top: 0; left: 0; z-index: 9999; display: none;">
   menu 2
</div> 
<br /><br /><br />
Role para baixo
<br /><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis, tortor ut posuere tempus, massa massa maximus ex, eu tempus enim mauris ac dui. Mauris et fringilla dolor. Vivamus maximus quam elit, sed elementum ante luctus at. Curabitur nisl ipsum, viverra sed pellentesque in, ultrices vitae odio. Nullam iaculis, quam at imperdiet dignissim, ipsum nibh lacinia quam, a venenatis lectus nibh sit amet nisl. Suspendisse a interdum sem. Aliquam erat volutpat. Nulla nec enim elit. Donec mollis finibus nibh, ac vehicula tortor vehicula vel. Maecenas congue iaculis feugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis, tortor ut posuere tempus, massa massa maximus ex, eu tempus enim mauris ac dui. Mauris et fringilla dolor. Vivamus maximus quam elit, sed elementum ante luctus at. Curabitur nisl ipsum, viverra sed pellentesque in, ultrices vitae odio. Nullam iaculis, quam at imperdiet dignissim, ipsum nibh lacinia quam, a venenatis lectus nibh sit amet nisl. Suspendisse a interdum sem. Aliquam erat volutpat. Nulla nec enim elit. Donec mollis finibus nibh, ac vehicula tortor vehicula vel. Maecenas congue iaculis feugiat.</p>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis, tortor ut posuere tempus, massa massa maximus ex, eu tempus enim mauris ac dui. Mauris et fringilla dolor. Vivamus maximus quam elit, sed elementum ante luctus at. Curabitur nisl ipsum, viverra sed pellentesque in, ultrices vitae odio. Nullam iaculis, quam at imperdiet dignissim, ipsum nibh lacinia quam, a venenatis lectus nibh sit amet nisl. Suspendisse a interdum sem. Aliquam erat volutpat. Nulla nec enim elit. Donec mollis finibus nibh, ac vehicula tortor vehicula vel. Maecenas congue iaculis feugiat.</p>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis, tortor ut posuere tempus, massa massa maximus ex, eu tempus enim mauris ac dui. Mauris et fringilla dolor. Vivamus maximus quam elit, sed elementum ante luctus at. Curabitur nisl ipsum, viverra sed pellentesque in, ultrices vitae odio. Nullam iaculis, quam at imperdiet dignissim, ipsum nibh lacinia quam, a venenatis lectus nibh sit amet nisl. Suspendisse a interdum sem. Aliquam erat volutpat. Nulla nec enim elit. Donec mollis finibus nibh, ac vehicula tortor vehicula vel. Maecenas congue iaculis feugiat.</p>

Answer 2

Take a look at this: https://www.w3schools.com/bootstrap/bootstrap_affix.asp

It can help you and give you a direction of what to research.