Навигатор с фиксированным верхом скрывает содержимое под ним

Question

У меня есть панель навигации с фиксированным верхом, созданная с помощью библиотеки начальной загрузки.Я добавил тело сверху, чтобы не скрывать содержимое под ним.Но когда я нажимаю на ссылку "о нас", например, верхняя часть этого скрывается под панелью навигации.Можно ли как-то это исправить, чтобы при нажатии на ссылку контент о нас находился чуть ниже панели навигации?

body{
  padding: 3em 0;
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top">
  <div class="container-fluid">
      <a href="#about-us">About Us</a>
  </div>
</nav>
<div class="content">
  <div id="about-us">
       <h1>About Us</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <div>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

  </div>
</div>

Answer 1

Вот одно из возможных решений, которое также добавляет функцию «плавной прокрутки», одновременно решая вашу проблему.

Секрет здесь в том, чтобы использовать метод jQuery .animate() вместе со смещением, чтобы переместить страницу в нужный раздел (за вычетом значения смещения) . Итак, вам нужно:

1. Имя класса, любое имя класса

2. Добавить это имя класса к ссылкам меню (Обратите внимание, что ссылки меню должны быть тегами привязки, для данного конкретного примера кода)

3. Используйте код jQuery в приведенной ниже демонстрации, который отслеживает клики по элементам с этим className, а затем использует jQuery animate для перехода к разделу с идентификатором, соответствующим атрибуту href. Магия, которая решает вашу проблему - это смещение.

Вместо $('a.jtkirk') в качестве выбора / триггера вы также можете использовать $('a[href^=#]') (что говорит: для всех a-тегов с href, начинающимся с символа # ) - но это не работает со фрагментами стека StackOverflow, поэтому я не могу его протестировать / продемонстрировать. Но использование класса для идентификации ссылок с плавной прокруткой не повредит. Опять же, вы можете выбрать любое имя для класса, я использовал прозвище капитана Кирка, чтобы было легко это увидеть.

DEMO:

$('a.jtkirk').click(function(e){
    e.preventDefault();
    var kirkoffset = 50;
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - kirkoffset
    }, 700);
});

body{
  padding: 3em 0;
}

/*  Below not necessary - only for demo layout */
nav .scroll{
  display:flex;
  justify-content:flex-start !important;
}

nav .scroll a {margin-right:15px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top scroll">
  <div class="container-fluid scroll">
      <a class="jtkirk" href="#about-us">About Us</a>
      <a class="jtkirk" href="#nuther-one">Nuther One</a>
  </div>
</nav>
<div class="content">
  <div id="about-us">
       <h1>About Us</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>
  <div>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>
  <div id="nuther-one">
       <h1>Nuther One</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>

</div>

Answer 2

Вы можете использовать селектор : target с элементом :before с height панели навигации.

body {
  padding: 3em 0;
}

:target::before {
    display: block;
    height: 40px;
    margin-top: -40px;
    content: '';
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top">
    <div class="container-fluid">
        <a href="#about-us">About Us</a>
    </div>
</nav>
<div class="content">
    <div id="another">
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
    <div id="about-us">
        <h1>About Us</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <div>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
</div>

Answer 3

Используйте

#about-us {
  padding: 3em 0;
}

вместо

body {
  padding: 3em 0;
}