Как закрепить шапку кверху экрана

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

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

Надо то всего лишь заключить шапку и горизонтальное меню в отдельный div с параметрами position:fixed;  top:0;

Таким образом у нас css слой будет постоянно привязан кверху. И всё бы ничго, но контент начала налегать на шапку и таким образом получилась каша. Избавиться от этого можно задав большой z-index для нашего слоя, и после него я рекомендую вставить пустой див по высоте равный нашей шапке, чтобы всё смотрелось гармонично.

В общем исходя из этого в css у меня получился такой код

.headerstat
{
position:fixed;
top:0;
width:1000px;
z-index:1000;
}
.pusto
{
height:160px;
}

С уважением, фрилансер-вебмастер Александр Шульгинов

Подпишитесь на рассылку

Чтобы быть в курсе обновлений блога, новостей по вордпресс и сайтостроительству

6 комментариев. Оставить новый

  • Добрый день, Александр!

    Обращаюсь к Вам за помощью.
    Недавно я создала сайт и открыла онлайн школу. Теперь мне необходимо добавить несколько элементов, например: зафиксировать слой внизу таким образом, чтобы он отображался на всех страницах. Но совсем не могу разобраться, как это работает. Пример того,что я хочу Вы найдете на сайте ниже
    http://www.tutoronline.ru/promo/english/index.html

    Не могли бы Вы подсказать,как это работает?

    Благодарю!

    С уважением, Алина

  • Здравствуйте, Алина. К сожалению так сразу я ответить не могу. Тут надо смотреть ваш шаблон и немного править код. Но скорее всего вам придётся править файл footer.php, предварительно наполнив его своим содержимым. Но на вашем сайте, но мой взгляд, этого делать не стоит. Он замечательный. Сейчас всё на своём месте, а данная штука будет только всё портить

  • Баг. Если прокрутить колесико вниз, а потом резко вверх, то меню появляется в самом верху страницы. Как можно это исправить?

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

  • Добрый день! У меня есть сайт путешествий. Я хотела бы зафиксировать шапку вверху, но боюсь все испортить. Подскажите, где мне нужно внести изменения. Буду очень благодарна.

  • Ramiel Reine
    1 июня 2017 11:55

    Тамара
    23 мая 2017 3:10
    Добрый день! У меня есть сайт путешествий. Я хотела бы зафиксировать шапку вверху, но боюсь все испортить. Подскажите, где мне нужно внести изменения.

    Ответ: Главным образом, в своих знаниях أHTML

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заполните поле
Заполните поле
Пожалуйста, введите корректный адрес email.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Обо мне

Работаю с сайтами с 2010 года.
Более 500 выполненных проектов
Специализируюсь преимущественно на сайтах-визитках, блогах и небольших интернет магазинах.
Подробнее

Внимание! Получи бесплатно видеокурс!

Хостинг ХостиЯ


Меню