Sticky menu with problem updating page in Firefox

Question

The Sticky menu I made has a problem only in Firefox.

If I update the page with the Sticky menu active, that is, when the scroll bar is not at the beginning of the screen, the menu goes back to the "default" and only activates the Sticky again if I scroll the screen.

I would like the Sticky menu already activated when the page was loaded, checking the position of the scroll bar.

$(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>

Answer 1

It will probably occur in other browsers as well, as the class is only added when the action of scroll. To resolve this issue you need to perform the check also when the document finishes loading.

Your code would look like this

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);
});