Question

我正在使用offset();设置引导程序上.nav菜单的位置，并在fixed和scroll intersection类附近放置.r-logo-menu-desktop。 .nav菜单，将fixed类添加到.nav，并在滚动到顶部时将其删除，并将.nav放在同一position中。在Safari / Chrome浏览器中工作正常，但在Firefox中，菜单fixed也位于滑块中间，而不是最后。您可以看到示例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;
}

更新脚本：

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

编辑：尝试这样。由于页眉正在更改高度，因此您需要获取其位置。

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>

错误的offset（）;在Firefox上

1 个答案: