3

Доброго времени суток! Столкнулся с небольшой проблемой. Есть html страница, на ней расположена шапка. Под ней основной контент, который может вертикально прокручиваться. Также имеется ссылка вида

<a href='#some'>Navigate to</a>

При клике на ссылку происходит переход к элементу с id = some. Проблема в том, что header страницы закрывает верхнюю часть (у него position fixed), и получается, что элемент some перекрывается header'ом, и чтобы его увидеть ,нужно немного прокрутить страницу вверх. Если для header'a сделать display=none, то навигация происходит корректно. Вот здесь код. Подскажите пожалуйста, что нужно сделать, чтобы навигация работала корректно? Заранее спасибо!

0

2 ответа 2

1

body{margin: 0;}
.fixed{background: red; position: fixed; left: 0; top: 0; right: 0; height: 50px;}
.spacer{height: 100px;}
.spacer2{height: 600px;}
#some{margin-top: -50px; padding-top: 50px;}
<div class="fixed"></div>
<div class="spacer"></div>
<div id="some">some</div>
<a href="#some">Link</a>
<div class="spacer2"></div>

Используйте отрицательный верхний margin и равный ему верхний padding на блоке #some, которые равны высоте фиксированного блока. Таким образом играясь с величинами можно делать также дополнительный отступ сверху при навигации.

0

Как вариант:

Использовать вспомогательный блок с position: relative; top: -60px;

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px;
}

#anchor {
  color: red;
}
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <a href='#anylink'>Navigate to anchor</a>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <div>
    <div id="anylink" style="position:relative; top:-60px;"></div>
    <p id="anchor">Some text some text some text some text..</p>
  </div>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>

</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.