Якорь и шапка сайта
Доброго времени суток! Столкнулся с небольшой проблемой. Есть html страница, на ней расположена шапка. Под ней основной контент, который может вертикально прокручиваться. Также имеется ссылка вида
<a href='#some'>Navigate to</a>
При клике на ссылку происходит переход к элементу с id = some. Проблема в том, что header страницы закрывает верхнюю часть (у него position fixed), и получается, что элемент some перекрывается header'ом, и чтобы его увидеть ,нужно немного прокрутить страницу вверх. Если для header'a сделать display=none, то навигация происходит корректно. Вот здесь код. Подскажите пожалуйста, что нужно сделать, чтобы навигация работала корректно? Заранее спасибо!
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, которые равны высоте фиксированного блока. Таким образом играясь с величинами можно делать также дополнительный отступ сверху при навигации.
Как вариант:
Использовать вспомогательный блок с 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>
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
-
13:46
-
10:14
-
18:32
Сборка персонального компьютера от Artline: умный выбор для современных пользователей
- Почему SERVER_ADDR имеет не тот IP 49922 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31901 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25882 visits
- Как через css изменить цвет png изображения? 11723 visits
- Blob video url download 11268 visits
- Php curl запрос через прокси с авторизацией 10670 visits
- Работа с captcha vk api 9471 visits
© "hostciti.net" 24.12.2025 | 10:59