0
So I’m having a problem and I’ve been racking my brain. I made a top menu, in which are the social networks and a second menu below with the site items.
The problem is that I made sure that when the scroll is greater than 0, the first menu disappears and the second menu is fixed at the top. And when the scroll returns to 0, the first menu appears again.
So far so good, it’s working perfectly. The problem is that when I update the page with a scroll larger than 0 (In the middle of the site for example) the first menu does not appear (this is right) and the second menu does not load fixed at the top (this is the problem), but click on the position it should start when we load the page with scroll equal to 0.
I will show a print of the site when you load the site with scroll 0 and when you load the page with scroll greater than 0.
In the second image, it was for the bottom menu (The menu with white background) to click fixed at the top.
I’ll leave the code below:
/* ---------------------------------- FUNÇÃO PARA APARECIMENTO E DESAPARECIMENTO DO "MENU SUPERIOR" DA TELA PRINCIPAL ---------------------------------------------- */
$(function()
{
$(window).on("scroll", function()
{
/* FUNÇÃO DO MENU SUPERIOR */
if($(window).scrollTop() < 1)
{
$('div#cabecalho-superior').fadeIn(0);
$('div#cabecalho-superior').css('position','fixed-top');
}
else if($(window).scrollTop() > 0)
{
$('div#cabecalho-superior').fadeOut(0);
}
});
});<div class="row hidden-xs hidden-sm" id="cabecalho-superior">
<div class="col-sm-12 col-md-12 col-lg-10 col-lg-offset-1" id="cabecalho-superior-acerto">
<div class="col-sm-4 col-md-4 col-lg-5" id="div-redes">
<a href="https://www.facebook.com/jcacontadores/" target="blank"><img src="_imagens/icones/footer_redesFace.png"></a>
<a href="https://www.instagram.com/jcacontadores/" target="blank"><img src="_imagens/icones/footer_redesInsta.png"></a>
<a href="https://www.linkedin.com/in/jca-contadores-406/" target="blank"><img src="_imagens/icones/footer_redesLink.png"></a>
<a href="https://www.youtube.com/channel/UCLb6KnKGdjKh-usDWdZ93yg?view_as=subscriber" target="blank"><img src="_imagens/icones/footer_redesYouTube.png"></a>
</div>
<div class="col-sm-10 col-md-8 col-lg-7" id="div-menu">
<ul class="" id="ul-cabecalho-superior-direita">
<li><a href="https://encurtador.com.br/gOPZ6" target="_blank"><img src="_imagens/icones/icone-zap.png"> Whatsapp </a></li>
<li><a href="mailto:[email protected]"><img src="_imagens/icones/icone-email.png"> [email protected]</a></li>
<li><a class="estilo-botoes" href="#" data-toggle="modal" data-target="#modal-contato"><button class="btn btn-info btn-sm" style="font-family: Franklin Gothic; font-size: 100%">Fale com um Especialista</button></a></li>
</ul>
</div>
</div>
</div>
<!-- ÁREA DOS MENUS SUPERIORES -->
<nav class="hidden-xs hidden-sm" id="nav-principal">
<div class="visible-xs col-xs-12">
<a href="index.php"><img src="_imagens/logo-216x93.png" style="width:20%"></a>
</div>
<div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1" id="acerto-margin-menu-movel">
<div class="hidden-xs">
<a href="index.php"><img src="_imagens/logo-216x93.png"></a>
</div>
<ul id="menu-desktop">
<li><a href="area-cliente.php" target="_blank"><button class="btn btn-primary btn-sm" style="margin-right: 0.5% font-family: Franklin Gothic; font-size: 90%" id="bot-area-cliente"><span class="glyphicon glyphicon-lock"></span>  ÁREA DO CLIENTE</button></a></li>
</ul>
<ul id="menu-desktop">
<li class="li-redes-clientes" id="li-redes-clientes-home"><a class="a-menu" href="index.php" style="font-weight: bold;">HOME</a></li>
<li class="li-redes-clientes" id="li-redes-clientes-sobre"><a class="a-menu" href="quemsomos.php" style="font-weight: bold; cursor:pointer" id="botao-quemsomos">QUEM SOMOS</a></li>
<li class="li-redes-clientes" id="li-redes-clientes-servicos" role="presentation" class="dropdown li-menu">
<a class="dropdown-toggle a-menu" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="font-weight: bold;">
SERVIÇOS<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="submenu-servicos">
<li class="li-submenu-servicos"><a class="a-submenu-servicos" href="servicos-fiscal.php">GESTÃO FISCAL E TRIBUTÁRIA</a></li>
<li class="li-submenu-servicos"><a class="a-submenu-servicos" href="servicos-departamento-pessoal.php">DEPARTAMENTO PESSOAL</a></li>
<li class="li-submenu-servicos"><a class="a-submenu-servicos" href="servicos-contabilidade.php">SERVIÇOS CONTÁBEIS</a></li>
<li class="li-submenu-servicos"><a class="a-submenu-servicos" href="servicos-auditoria.php">AUDITORIA</a></li>
<li class="li-submenu-servicos"><a class="a-submenu-servicos" href="servicos-consultoria.php">CONSULTORIA</a></li>
<li class="li-submenu-servicos"><a class="a-submenu-servicos" href="servicos-incentivos-fiscais.php">BENEFÍCIOS FISCAIS</a></li>
<li class="li-submenu-servicos"><a class="a-submenu-servicos" href="servicos-area-societaria-legalizacao.php">LEGALIZAÇÃO DE EMPRESAS</a></li>
<li class="li-submenu-servicos"><a class="a-submenu-servicos" href="servicos-analise-de-produtos.php">ANÁLISE CADASTRAL DE PRODUTOS</a></li>
</ul>
</li>
<li class="li-redes-clientes" id="li-redes-clientes-carreiras" role="presentation" class="dropdown li-menu">
<a class="dropdown-toggle a-menu" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="font-weight: bold;">
CARREIRAS<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="submenu-carreiras">
<li class="li-submenu-carreiras"><a class="a-submenu-carreiras" href="contato-despertando.php">PROGRAMA DESPERTANDO TALENTOS</a></li>
<li class="li-submenu-carreiras"><a class="a-submenu-carreiras" href="contato-profissionais.php">PROGRAMA PROFISSIONAIS EXPERIENTES</a></li>
</ul>
</li>
<li class="li-redes-clientes" id="li-redes-clientes-blog"><a class="a-menu" href="http://jcacontadores.com.br/" target="blank" style="font-weight: bold;">BLOG</a></li>
<li class="li-redes-clientes" id="li-redes-clientes-contato"><a class="a-menu" href="#" data-toggle="modal" data-target="#modal-contato" style="font-weight: bold;">CONTATO</a></li>
</ul>
</div>
</nav> The website address if you want to test insert link description here
thiagopetherson.tech
I appreciate the attention and hope to have been clear (I am new here). Thank you !
Add a Trigger to the same window event:
$(window).on("scroll", function(){ // códigos }).trigger("scroll");– Sam
you are only subscribing to the "scroll" event, also subscribe to the "load" and "resize" events. Then you put this code that you made to check if the menu should be displayed within a function and calls this function whenever one of the three events is triggered.
– Sérgio S. Filho