Question

几天来我一直在试图解决它。我认为，当我在iPhone上打开网站时，粘性导航栏卡在错误的位置甚至会引起故障。我将附上图片，代码和网址。

URL：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;
 }

粘性导航栏突然折断，导致故障

1 个答案: