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>