Wrong offset(); on Firefox

Question

I'm using offset(); to set the position of a .nav menu on bootstrap and make fixed when the scroll intersection the .r-logo-menu-desktop class, near the .nav menu, adding a fixed class to .nav and remove it when the scroll goes to top and let the .nav in the same position . In Safari/Chrome work's fine but in Firefox the menu goes fixed too son, in the middle of the slider, instead in the end. You can see the example here .

    <!-- Navigation -->
    <div class="nav-wrapper">
    <div class="nav"><nav id="navbar" class="navbar navbar-expand-lg mx-auto navbar-dark bg-white">       

    <div class="mx-auto order-0 order-md-1 position-relative">
                 <img class="r-logo-menu" src="img/Logos-RUCAB-7.png" />
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul  class="navbar-nav mx-auto mr-auto text-center">
         <img class="r-logo-menu-desktop" src="img/Logos-RUCAB-7.png" />
        <nav class="cl-effect-5">
            <li class="nav-item">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#home"><span data-hover="HOME">HOME</span></a>
            </li>
                    </nav>
                  <nav class="cl-effect-5">
            <li class="nav-item">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#rucab"><span data-hover="RUCAB">RUCAB</span></a>
            </li>
             </nav>
                    <nav class="cl-effect-5">
            <li class="nav-item">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#inscripciones"><span data-hover="INSCRIPCIONES">INSCRIPCIONES</span></a>
            </li>
             </nav>
             <nav class="cl-effect-5">
            <li class="nav-item active">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#habitaciones"><span data-hover="HABITACIONES">HABITACIONES</span></a>
            </li>
             </nav>
              <nav class="cl-effect-5">
            <li class="nav-item">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#staff"><span data-hover="STAFF">STAFF</span></a>
            </li>
             </nav>
             <nav class="cl-effect-5">
            <li class="nav-item">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#contact"><span data-hover="BLOG">BLOG</span></a>
            </li>
             </nav>
                    <nav class="cl-effect-5">
            <li class="nav-item">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#contacto"><span data-hover="CONTACTO">CONTACTO</span></a>
            </li>
             </nav>

        </ul>
    </div>
</nav>
</div>
</div>

JQUERY

      // cache the element
var $navBar = $('.nav');
    var $rlogo = $('.r-logo-menu-desktop');

// find original navigation bar position
var navPos = $navBar.offset().top;

// on scroll
$(window).scroll(function() {

    // get scroll position from top of the page
    var scrollPos = $(this).scrollTop();

    // check if scroll position is >= the nav position
    if (scrollPos >= navPos) {
        $navBar.addClass('fixed');
        $rlogo.addClass('show');
    } else {
        $navBar.removeClass('fixed');
        $rlogo.removeClass('show');
    }

});

CSS

.r-logo-menu-desktop.show {

    margin-bottom: 2px;
    opacity: 1 !important;
    width: 60px;
    margin-right: 20px;

}

.r-logo-menu-desktop {
opacity: 0; 
margin-right: 20px;  
transition: opacity 300ms ease;
}

.nav-wrapper {
    height: 90px;
    background: #fff;
}

.nav-wrapper .nav {
    height: 20px;
    background: #fff;
    line-height: 20px;
}
.navbar-nav {
    background: #fff;
}

.nav-wrapper .nav.fixed {
      -webkit-backface-visibility: hidden;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
}

UPDATED SCRIPT:

var $header = $('#carouselExampleIndicators');
var $navBar = $('.nav');
var $rlogo = $('.r-logo-menu-desktop');

$(window).scroll(function() {

    var headerPos = $header.height();
    var scrollPos = $(this).scrollTop();

    if (scrollPos >= headerPos)
    {
        $navBar.addClass('fixed');
        $rlogo.addClass('show');
    }
    else
    {
        $navBar.removeClass('fixed');
        $rlogo.removeClass('show');
    }

});

Answer 1

Edit: Try like this. Because the header is changing the height, you need to get that for position.

 var $header = $('#carouselExampleIndicators-custom'); var $navBar = $('.nav'); var $rlogo = $('.r-logo-menu-desktop'); $(window).scroll(function() { var headerPos = $header.height(); var scrollPos = $(this).scrollTop(); if (scrollPos >= headerPos) { $navBar.addClass('fixed'); $rlogo.addClass('show'); } else { $navBar.removeClass('fixed'); $rlogo.removeClass('show'); } }); 

 html,body{margin:0;padding:0} body{font-size:0;height:1920px} img{width:100%} .r-logo-menu-desktop{visibility:hidden} .r-logo-menu-desktop.show{visibility:unset} #carouselExampleIndicators-custom{display:block;background:#a3b0b0} .nav{display:block;background:#cad7d7;padding:8px} .nav.fixed{position:fixed;width:100%;top:0} ul{margin:0;padding:0;list-style:none;font-family:Arial;font-size:24px} ul li{display:inline} 

 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <header id="carouselExampleIndicators-custom"><img src="https://www.lagaleramagazine.es/rucab/img/1400_slider1.jpg"></header> <nav class="nav"> <ul> <li><span class="r-logo-menu-desktop">R</span></li> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> </body> </html>