0
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
in case it would be Window
– User1999
The second menu is invisible when loading the page?
– Sam
not it becomes visible, in case it overwrites the first menu of the image I sent
– User1999
The second menu is visible where on page loading?
– Sam
at the top of the page, superimpose <div class="topmenu_"></div>
– User1999
Take a look at my answer. I didn’t get it right. Will both menus appear at the same time when opening the page? And after rolling only the second that will be visible?
– Sam
DVD I made a UPDTADE in the question I put the image of how this page, I wanted when loading the page to show the blue menu and when I scroll the scroll bar shows up the second menu, but it shows the two one below the other when loading the page
– User1999