Sticky menu with problem when updating page in Firefox

Question

Sticky menu with problem when updating page in Firefox

Navigation

#1 by (1 votes)

0

The Sticky menu I made is with a problem only in Firefox.

If I update the page with the Sticky menu active, ie when the scroll bar is not at the top of the screen, the menu returns to the "default" and only activates the sticky again if I scroll the screen. / p>

I would like the sticky menu to be activated soon after the page loads, checking the position of the scrollbar.

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

javascript html css

asked by anonymous 28.12.2016 / 11:59

1 answer

Create DLL Project Dependency conflict in JSF with Maven

score 1 · Accepted Answer

It will probably happen in other browsers as well, because the class is only added when the scroll action happens. To resolve this issue you need to run the verification 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);
});