Como manter um MENU FIXO na tela (Sticky Menu)

Para manter o menu da sua página fixo na tela, enquanto os visitantes navegam pelo seu site, siga o tutorial abaixo:

Faça login na sua conta no GreatPages e acesse o editor de páginas;



Acesse o ícone de engrenagem no canto superior direito da tela, e acesse "Javascript & CSS";



Clique para adicionar um novo código;



Dê um nome para ele, marque a opção "Funcionamento" e adicione no campo de texto todo o código abaixo;

<script> 
window.addEventListener('scroll', function () {
         if ((window.pageYOffset || window.scrollY) > 0) {             
             $('#site div.gpc-b:nth-child(1)').css({ 'position': 'fixed', 'z-index': '9999999' });         
             $('#site div.gpc-b:nth-child(2)').css({ 'margin-top': $('#site div.gpc-b:nth-child(1)').height() + 'px' });
         } else {            
             $('#site div.gpc-b:nth-child(1)').css({ 'position': 'initial', 'z-index': '' });
             $('#site div.gpc-b:nth-child(2)').css({ 'margin-top': '0px' });
         }
     }, false); 
</script>

Depois disso, clique em "Salvar".



Lembrando que esse código irá manter apenas o primeiro bloco fixo na tela. Caso você precisa que outro bloco seja mantido fixo, siga o tutorial abaixo, ou entre em contato com nossa equipe no Chat.

Como manter um BLOCO ESPECÍFICO FIXO na tela — https://ajuda.greatsoftwares.com.br/pt-br/article/como-manter-um-bloco-especifico-fixo-na-tela-36zpp/

Atualizado em: 25/06/2024