Как закрепить шапку сайта при прокрутке страницы

как закрепить шапку сайтаВсем привет. Сегодня посмотрел статистику поисковых запросов, по которым люди переходят на блог и обнаружил, что есть несколько совсем не релевантных. Нет, не блогу, а статьям.

Один из них как зафиксировать шапку сайта? Я тут же решил исправить положение и написать статью, так как тема актуальная, и есть вопросы в данной области.

Вообще, существует несколько способов того, как закрепить шапку сайта при прокрутке страницы. Можно воспользоваться javascript, но я не очень силен в этой теме и только изучаю ее. Поэтому, пока, будем обходиться css. Слава Богу, зафиксировать шапку сайта (да и не только шапку, а любой другой элемент), можно "малой кровью" 🙂

На самом деле, метод фиксации элемента при прокрутке страницы очень простой, и вы удивитесь, как просто решается данная проблема.

Фиксация шапки при прокрутке страницы

Для того, чтобы зафиксировать шапку, придется создать два блока. Один - для того, чтобы была возможность центрировать шапку. А в нем дочерний, который и будет фиксироваться. Начнем…


<div id="headerMain">

 <div id="header">

 </div>

</div>

Вот такая простая html структура! Теперь добавим стили!

#headerMain {
  width:920px;
  height: 195px;
  margin:0px auto;
  z-index:0;
}

#header {
  width:920px;
  height: 195px;
  background: url(../img/bg-header.jpg) no-repeat;
  position: fixed;
  z-index: 9999;
}

Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.

Скачать исходник

Вот такая маленькая статья получилась сегодня. Если будут вопросы – пишите их в комментариях. Постараюсь помочь. До встречи на смартлендинг

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 15

  1. gow

    А есть еще что то похожее на эту тему?

  2. Виктор

    При этом, шапка должна еще и видоизменяться уменьшаться, чтобы не закрывать всю страницу для пользователя.

    • dimadv7

      Ну тут каждый под себя подстраивает уже. Всем не угодишь. Сейчас сделаю ее в полосочку 60 пикселей при прокрутке, скажут не 60 а 40. Или, что теперь логотип не помещается. Я показал общую концепцию и все.

  3. Дмитрий

    Добрый день!
    Подскажите, а как сделать, что бы менялся размер при прокрутке страницы в зафиксированном хедере?

    • dimadv7

      Не знаю, наверное нужно ловить при помощи js расстояние от конца экрана браузера до шапки и в определенный момент менять ее размер, на нужный. Я не разбирался в этом вопросе. Может быть есть способ и проще. Разберешься — отпиши)

  4. MichaelSi

    Здравствуйте! А не подскажите, как сделать чтобы меню меняло цвет при фиксации сверху сайта. Чё то ни как не могу разобраться. Буду очень признателен Вам!

    • dimadv7

      Нет, не подскажу. Думаю, нужно ловить этот момент при помощи js и писать условие.

  5. Vivando

    Здравствуйте! А не подскажите, как сделать чтобы меню меняло цвет при фиксации сверху сайта. Чё то ни как не могу разобраться. Буду очень признателен Вам!

  6. svoitabachok

    Очень полезно, спасибо! А как сделать, чтоб при прокрутке наше меню останавливалось на определенном расстоянии от верха и прокрутка продолжалась уже без него?

  7. Алексанр

    а как сделать кнопку TOP в правой нижней части экрана, как у вас ?

  8. find-way-net

    Очень полезно, спасибо! А как сделать, чтоб при прокрутке наше меню останавливалось на определенном расстоянии от верха и прокрутка продолжалась уже без него?

  9. Иван

    Сделал все как написано, почему-то не получилось… DLE 11.1
    Закрепить саму шапку закрепил, но она уходить при скроле.
    Если есть возможность помочь буду очень благодарен.

    • dimadv7

      Здравствуйте, никогда не работал с DLE

  10. Елизавета

    Как добавить иконку сайта в адресную строку браузера? Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?

    • dimadv7

      О фавиконках — тут посмотреть можно. А зафиксировать блок на месте можно так:

      .name--block {
      position: fixed;
      }
      

Добавить комментарий