При присвоении идентификаторов той же веб-страницы, что и гиперссылки в Navbar, соответствующие данные отображаются некорректно - PullRequest
0 голосов
/ 01 июля 2018

В приведенном ниже коде я даю идентификаторы различных строк в виде гиперссылок на теги привязки в Navbar. Белый При нажатии Home & About в Nav на веб-странице страница прокручивается в соответствующие строки, но верхняя часть текста, т. Е. Текст, написанный в тегах h1, прокручивается ниже панели навигации и не видна. Однако для Service & Contact это хорошо. Может кто-нибудь объяснить, почему это происходит.

  <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">

    <!--         <div class="navbar-brand">

                <a href="#"><img src="TECHIZONE_LOGO_FINAL.png" style="width: 7%; height=" 10px;"></a>

            </div> -->
              <a class="navbar-brand" href="#">BRANDNAME</a>

              <button type="button" class="navbar-toggle" data-toggle="collapse" data-taget="#mynavbar">

                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>

              </button>
          </div>

          <div class="collapse navbar-collapse" id="myNavbar">  
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#HOME">HOME</a></li>
            <li><a href="#ABOUT">ABOUT</a></li>
            <li><a href="#SERVICE">SERVICE</a></li>
            <li><a href="#CONTACT">CONTACT</a></li>
          </ul>

        </div>


    </div>

  </div>
    <div class="container">
         <div class="jumbotron">
              <h1>BOOTSTRAP CLASSES</h1>
              <p>NAVBAR</p>
         </div>


         <div class="row" id="HOME"> 
            <div class="col-md-6">
              <h1>THIS IS HOME SECTION</h1>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>


            </div>
            <div class="col-md-6">

              <h1>THIS IS HOME SECTION</h1>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>







            </div>


          </div>
         <div class="row" id="ABOUT"> 
            <div class="col-md-6">

              <h1>THIS IS ABOUT SECTION</h1>
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    

            </div>
            <div class="col-md-6">
              <h1>THIS IS ABOUT SECTION</h1>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>


            </div>


          </div>
         <div class="row" id="SERVICE"> 
            <div class="col-md-6">

              <h1>THIS IS SERVICE SECTION</h1>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
            </div>
            <div class="col-md-6">

              <h1>THIS IS SERVICE SECTION</h1>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
            </div>


          </div>
         <div class="row" id="CONTACT"> 
            <div class="col-md-6">
              <h1>THIS IS CONTACT SECTION</h1>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
            </div>
            <div class="col-md-6">
              <h1>THIS IS CONTACT SECTION</h1>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
            </div>


          </div>





    </div>

1 Ответ

0 голосов
/ 02 июля 2018

Почему это происходит:

Когда вы нажимаете на ссылки, положение прокрутки устанавливается таким образом, чтобы связанный элемент (в вашем случае теги h1) размещался в самой верхней части страницы. Проблема и результирующее перекрытие связано с тем, что навигационная панель имеет атрибут position: fixed. Это отобразит его в верхней части страницы независимо от положения прокрутки.

Читайте об атрибуте позиции здесь: https://www.w3schools.com/cssref/pr_class_position.asp

Что делать:

Быстрое решение состоит в том, чтобы увеличить отступ для элементов h1 с высотой панели навигации:

h1 {
   padding-top:60px;
}

Результат этого:

https://jsfiddle.net/n4mez16b/30/

Как вы можете видеть, недостатком является то, что площадь между h1 и элементами перед ними увеличивается, что может быть нежелательно. Лучшее решение, которое может работать еще лучше, с использованием псевдоэлемента: before (измените значения поля / высоты в соответствии с вашими потребностями):

h1:before { 
  display: block; 
  content: ""; 
  margin-top: -40px; 
  height: 40px; 
  visibility: hidden; 
  pointer-events: none;
}

Результат этого:

https://jsfiddle.net/n4mez16b/37/

Больше примеров / решений:

Надеюсь, вы найдете решение для вашей проблемы, удачи!

EDIT:

Чтобы ответить на другой вопрос, почему два последних элемента отображаются так, как вам нужно (сервис и контакт), скорее всего, это связано с высотой окна браузера. Так как вы дойдете до конца, окно не сможет прокрутить контент выше. :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...