javascript - 粘性导航栏突然卡住，导致故障

Question

这几天我一直在努力解决这个问题。我认为，当我在 iPhone 上打开我的网站时，粘性导航栏在错误的位置捕捉​​的事实甚至会导致故障。我会附上图片和代码和网址。

网址:www.developmt.com 如果您向下滚动到导航栏应位于页面顶部的位置，它会快速跳转。我试过在内容 + 粘性上添加填充，但它没有修复它。

另外，当我在移动设备上打开时，导航栏停留在错误的高度并且不会等到我到达它时...... here is the bug in mobile

      window.onscroll = function() {myFunction()};

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
          if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
          } else {
            navbar.classList.remove("sticky");
          }
        }

html, body{
    overflow-x:hidden;
}

.banner{
    position:relative;
    background: url('bannerimage.png') no-repeat center;
    width:100%;
    height:auto;
    /* object-fit: fit;
    background-size: fit; */


}


.bannerlogo{  
    width:350px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    padding-top:155px;
    margin-bottom:153px;


}
#navbar{
    z-index: 1000;

}
.nav{
    height:70px;
    overflow:hidden;
    animation: slideFromRight 2s;

}


.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background:rgba(0, 0, 0, .7);
}
/* .sticky nav{
    margin-top:0;
} */


.sticky + #content {
    padding-top: 70px;
}

<div class="header">
    <section class="banner mx-0">
        <img class="bannerlogo" data-aos="fade-down" src="developmtlogo.png" alt="Develop MT logo: Design, Develop, Exceed. Develop M|T">
             <div id="navbar">
                   <ul class="nav justify-content-center">
                       <li class="nav-item">
                            <a class="nav-link home" href="#"><i class="fas fa-home fa-lg"></i></a>
                       </li>
                       <li class="nav-item">
                            <a class="nav-link services hori-nav" href="#">Services</a>
                       </li>
                       <li class="nav-item">
                            <a class="nav-link pricing hori-nav" href="#">Pricing</a>
                       </li>

                       <li class="nav-item">
                            <a class="nav-link portfolio hori-nav" href="#">Portfolio</a>
                       </li>
                            <a><i id="hori-button" class="fas fa-ellipsis-h text-center"></i></a>

                       <li class="nav-item">
                            <a class="nav-link about hori-nav" href="#">About</a>
                       </li>

                       <li class="nav-item">
                            <a class="nav-link contact hori-nav" href="#">Contact</a>
                       </li>  
                   </ul>                                        
              </div>
        </section>
    </div>

    <section id="content">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="servicestitle text-center">Services</h1>
                    <hr class="divider">
                </div>
            </div>


            <div class="row justify-content-center first" >
                <img class="boxelement" data-aos="flip-right" data-aos-duration="500"
                data-aos-easing="ease-in-out" src="webdesign.png" alt="">
                <img class="boxelement"data-aos="flip-right" data-aos-duration="500"
                data-aos-easing="ease-in-out" src="webdev.png" alt="">
                <img class="boxelement boxelement3" data-aos="flip-right" data-aos-duration="500"
                data-aos-easing="ease-in-out"src="graphicdesign.png" alt="">
            </div>
        </div>
  </section>

我去掉了大部分 html，这样在 SO 上看起来更容易

如果我遗漏了什么，请告诉我。任何帮助都会有很大的帮助!谢谢。

Answer 1

由于您使用了 position:fixed 导航栏高度将不会被其他元素考虑，并且为其设置边距也不会影响其他元素。

当导航栏切换到粘性模式时，您还应该将 margin-top:70px(导航栏高度)添加到包含服务标题的列。

       <div class="row">
            <div class="col-12" id="service-wrapper">
                <h1 class="servicestitle text-center">Services</h1>
                <hr class="divider">
            </div>
        </div>

js代码:

    window.onscroll = function() {myFunction()};
    var navbar = document.getElementById("navbar");
    var serviceWrapper = document.getElementById("service-wrapper")
    var sticky = navbar.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky");
        serviceWrapper.classList.add("service-stick-mode");
      } else {
        navbar.classList.remove("sticky");
        serviceWrapper.classList.remove("service-stick-mode");
      }
    }

CSS类:

.service-stick-mode{
  margin-top:70px;
 }