липкий navbar резко щелкает, вызывает сбой - PullRequest
Новая
       6

липкий navbar резко щелкает, вызывает сбой

0 голосов
/ 04 октября 2018

Я застрял на этом несколько дней, сейчас пытаюсь это исправить.Я думаю, что тот факт, что липкая навигационная панель щелкает не в том месте, даже вызывает ошибку, когда я открываю свой сайт на своем iphone.Я приложу картинки, код и URL.

url: www.developmt.com Если вы прокрутите вниз до места, где должна находиться навигационная панель, вверху страницы, она быстро переместится вниз.Я попытался добавить заполнение для контента + липкий, но это не исправить.

также, когда я открываю в мобильном телефоне, навигационная панель застревает на неправильной высоте и не ждет, пока я достигну этого. вот ошибка в мобильном телефоне 

      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 будет проще смотреть

Если я что-то упустилпожалуйста, дай мне знать.Любая помощь будет отличной помощью!благодарю вас.

1 Ответ

0 голосов
/ 04 октября 2018

поскольку вы используете 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;
 }
...