Как создать липкий заголовок для сайта

Question

Я хочу создать липкую строку заголовка для веб-сайта точно так же, как липкий заголовок на этом сайте (http://www.fizzysoftware.com/), если какой-либо из них может помочь мне с кодированием или любым ресурсом, который поможет мне создать так же. Ваш ответ очень помог бы мне.

Answer 1

В своем CSS добавьте

position: fixed;

к вашему элементу заголовка. Это так просто, правда. А в следующий раз попробуйте щелкнуть правой кнопкой мыши на том, что вы видите на сайте, и выберите "Проверить элемент". Я думаю, что у каждого современного браузера есть это сейчас. Очень полезная функция.

Answer 2

Если вы хотите сделать его липким при прокрутке вниз до определенной точки, вы можете использовать эту функцию:

$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%;
}

Вы можете использовать этот плагин, и у него есть несколько полезных опций

jQuery Sticky Header

Answer 3

CSS уже дает вам ответ. Ты это

.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}

теперь добавьте класс, прикрепленный к любой боковой панели меню, или к чему-нибудь, что вы хотите прикрепить к верхнему краю, и он автоматически вычислит маржу и будет придерживаться верха. Ура.

Answer 4

Попробуй это

Добавьте этот стиль в соответствующий

      style="position: fixed; width: -webkit-fill-available"

ИЛИ

      <style>
.className{
    position: fixed; 
    width: -webkit-fill-available;
}
</style>

Answer 5

Если вам нужна простота в параметрах 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, чтобы настроить ее по своему вкусу.