Я хочу создать липкую панель заголовка для веб-сайта точно так же, как липкий заголовок на этом веб-сайте (http://www.fizzysoftware.com/), если кто-нибудь может помочь мне с кодированием или любым ресурсом, который поможет мне создать такой же. Ваш ответ был бы очень полезен для меня.
Как сделать липкую шапку для сайта
Ответы (4)
В свой CSS добавьте
position: fixed;
к вашему элементу заголовка. Это так просто, на самом деле. И в следующий раз попробуйте щелкнуть правой кнопкой мыши по тому, что вы видите на веб-сайте, и выберите «Проверить элемент». Я думаю, что он есть в каждом современном браузере. Очень полезная функция.
Если вы хотите сделать его липким при прокрутке до определенной точки, вы можете использовать эту функцию:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
И липкий класс:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
Вы можете использовать этот плагин, и у него есть несколько полезных опций.
CSS уже дает вам ответ. Твое это
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
теперь добавьте класс sticky к любой боковой панели меню или к чему-либо, что вы хотите прикрепить к верхней части, и он автоматически рассчитает маржу и прикрепится к верхней части. Ваше здоровье.
Если вам нужна простота в HTML и CSS для создания Stiky NavBar, вы можете использовать следующее: Просто создайте навигационную панель, подобную этой:
<nav class="zone blue sticky">
<ul class="main-nav">
<li><a href="">About</a></li>
<li><a href="">Products</a></li>
<li><a href="">Our Team</a></li>
<li class="push"><a href="">Contact</a></li>
</ul>
</nav>
Не забудьте добавить классы в этом случае, я создал зону (чтобы разделить мой HTML в определенных областях, я хочу, чтобы мой CSS применялся), синий (просто цвет для навигации) и липкий, который будет нести нашу липкую функцию. Вы можете работать над другими атрибутами, которые хотите добавить, на ваше усмотрение. В CSS добавьте следующее, чтобы создать прилипание; сначала я начну с тега зоны
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
теперь с липкой биркой
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Фиксированное положение означает, что оно всегда будет в одном и том же положении; и с верхним 0 я всегда буду вверху и шириной 100%, поэтому он покрывает весь экран. А теперь цвет, чтобы сделать нашу панель навигации синей.
.blue {
background: #7abcff;
Вы можете использовать этот пример, чтобы создать свою липкую панель навигации и поиграть со свойствами CSS, чтобы настроить ее по своему вкусу.