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

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

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

Вообще, существует несколько способов того, как закрепить шапку сайта при прокрутке страницы. Можно воспользоваться 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;
}

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


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

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

20 комментариев

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      .name--block {
      position: fixed;
      }
      
  11. забавный автор, это не знаю, это не скажу...

    1. а ты сам все знаешь?

  12. а если в шапке два блока, стоящих последовательно (float:left), как тогда зафиксировать?
    (Для элемента с position: absolute или position: fixed нельзя одновременно устанавливать свойство float)

    1. Андрей, добавить 2 элемента в общий div и уже его позиционировать.

  13. Добрый день!
    в параметрах page-wrapper
    стоит
    min-width (1280)
    max-width (1400)

    при попытке установить подобное же в классе - получаем только один параметр все равно

    если ставить его 1400 - то шляпа едет вбок вправо на малых мониторах
    если ставить на 1280 - то соответственно на больших она занимает не полную часть верха тела страницы

    видимо что-то не так пишу... есть варианты решения данной проблемы?

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности