0

O Sticky menu que fiz está com um problema apenas no Firefox.

Se eu atualizo a página com o Sticky menu ativo, isto é, quando a barra de rolagem não está no início da tela, o menu volta para o "padrão" e só ativa novamente o sticky se eu rolar a tela.

Gostaria que o sticky menu já fosse ativado logo quando a página fosse carregada, verificando a posição da barra de rolagem.

$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('.header').addClass("sticky");
        $('.logo').addClass("sticky");
        $('.header-menu').addClass("sticky");
        $('.dropdown-content').addClass("sticky");
    } else {
        $('.header').removeClass("sticky");
        $('.logo').removeClass("sticky");
        $('.header-menu').removeClass("sticky");
        $('.dropdown-content').removeClass("sticky");
    }
});
.header-menu ul li a {
    padding: 20px 12px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 70px;
}

.header-menu.sticky ul li a {
    padding: 20px 12px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 50px;
}

.header-menu ul li:hover {
    background: #fd1616; /*Vermelho*/
    transition: all .1s ease;
}

/*Dropdown Menu*/

.dropdown-content {
    display: none;
    position: absolute;
    background: #fd1616;
    width: 155px;
}

.header-menu ul li .dropdown-content a {
    height: 50px;
    padding-left: 20px;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 10px;
  color: #fff;
  display: block;
  text-align: left;
  border-top: solid 1px #111112;
}

.header-menu.sticky ul li .dropdown-content.sticky a {
    height: 50px;
    padding-left: 20px;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 10px;
  color: #fff;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
    background: #111112;
}

.dropdown:hover .dropdown-content {
    display: block;
}

html:

<nav class="header-menu">
    <ul>
        <li><a href="ps4.html">PS4</a></li>
        <li><a href="xboxone.html">XBOX ONE</a></li>
        <li><a href="pc.html">PC</a></li>
        <li class="dropdown">
        <a href="outrosconsoles.html">Outros Consoles<span class="arrow-down"><img src="img/icones/arrow-down1.png"></span></a>
        <div class="dropdown-content">
        <a href="#">PS3</a>
        <a href="#">XBOX 360</a>
        <a href="#">WII U</a>
        <a href="#">3DS</a>
        <a href="#">PS Vita</a>
        </div>
        </li>
        <li><a href="esports.html">eSports</a></li>
        <li><a href="reviews.html">Reviews</a></li>
        <li><a href="videos.html">Vídeos</a></li>
      </ul>
  </nav>

1 Resposta 1

1

Provavelmente ocorrerá em outros browsers também, pois a classe só é adicionada quando acontece a ação de scroll. Para resolver este problema você precisa executar a verificação também quando o documento terminar de carregar.

O seu código ficaria assim

function stick() {
    if ($(this).scrollTop() > 1){  
        $('.header').addClass("sticky");
        $('.logo').addClass("sticky");
        $('.header-menu').addClass("sticky");
        $('.dropdown-content').addClass("sticky");
    } else {
        $('.header').removeClass("sticky");
        $('.logo').removeClass("sticky");
        $('.header-menu').removeClass("sticky");
        $('.dropdown-content').removeClass("sticky");
    }
}

$(document).ready( function () {
     stick();
     $(window).on('scroll', stick);
});
2
  • Resolveu! Mesmo sem essas linhas estava funcionando no Chrome, Edge e IE, o problema era no Firefox mesmo. De qualquer forma, obrigado. 30/12/2016 às 14:20
  • 😊 que bom! Sobre os outros browsers falei que pode acontecer por causa de versão, por exemplo para Mac ou mesmo versão anterior. Mas de toda forma, que bom que ajudei. =] abraços
    – marcusagm
    30/12/2016 às 14:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .