Как зафиксировать header при прокрутке страницы
Website-create.ru
Иногда бывает необходимо сделать шапку или сайдбар (а может быть и то и другое) на сайте фиксированными. То есть сколько бы Ваш посетитель не «скролил», контент будет двигаться, а фиксированный элемент всегда будет оставаться на той же самой позиции. На самом деле ничего сложного в этом нет, и сегодня я на примере покажу Вам как фиксировать позиции элементов.
Перед началом нашего урока хочется сказать, что таким образом Вы можете фиксировать не только шапку или сайдбар. Вы также можете сделать фиксированную позицию для футера или, возможно, Вы захотите сделать какую-то кнопку где-то сбоку, которая всегда будет на виду. В общем, все зависит от того, зачем Вам это нужно.
В данном же уроке я буду показывать фиксацию шапки и сайдбара (хотя на месте сайдбара мог бы оказаться и какой-то баннер или форма подписки, например).
Ну что же, давайте начнем!
Фиксируем позицию шапки и сайдбара на веб-странице
1. Первое, что потребуется сделать – это создать html-файл нашей страницы. Здесь я создам очень простую структуру страницы. У нее будет шапка с тремя заголовками, помещенная в тег header; сайдбар со ссылками и надписью, помещенный в тег aside; сами ссылки навигации будут расположены в теге nav; контент страницы в теге article и футер в теге footer.
Как видите, я в примере использую html5-теги. Это не принципиально, и если Вы по какой-то причине не хотите их использовать, то можете спокойно использовать теги div, при этом присваивая им соответствующие идентификаторы. Это никоем образом не повлияет на фиксацию элементов, просто мне в данном случае удобнее использовать именно html5.
Итак, вот содержимое html-файла с комментариями:
2. Вы, наверное, обратили внимание, что файл таблицы стилей уже подключен, осталось его только создать.
Итак, создаем css-файл с именем «fix.css» (можете дать и другое имя, но тогда не забудьте его поменять в атрибуте href тега link, который подключает файл таблицы стилей) и сохраняем в том же каталоге, что и наш html-файл.
Откроем css-файл, пока что он пусть и наша страница в браузере выглядит вот так.
Давайте займемся стилями и расставим все по своим местам.
Для начала я пропишу правило, чтобы все мои html5-элементы отображались как блочные (это решение для старых браузеров, которые не поддерживают данные элементы. Если бы не используете html5-теги, то можете не писать эту строчку). Также задам правило для тега body: мы зададим ему ширину, выравнивание по центру, рамку и цвет фона.
Теперь страница должна выглядеть вот так.
Страницу мы оцентровали, теперь давайте перейдем к стилям самой шапки.
Для того чтобы сделать нашу шапку фиксированной нам нужно задать для нее высоту, ширину и прописать position:fixed. Ширина нам в данном случае нужна такая же, как и ширина для тега body, то есть 980px, а высоту я взяла равную значению 300px.
Теперь поговорим о свойстве position. Когда для position задано значение fixed, то элемент фиксируется на определенном месте страницы. Также при значении position:fixed мы можем регулировать расположение элемента при помощи таких свойств, как top, right, bottom и left (но в случае с шапкой нам это не понадобится). Элемент с таким позиционированием привязывается к координатам окна и при прокрутке страницы остается на месте.
Также я придам нашей шапке цвет, рамку и выровняю текст, находящийся в ней по центру.
И также на этом этапе давайте придадим стили для заголовков на нашей странице и для тегов абзаца. Здесь ничего особенного – просто пропишем стиль шрифта, цвет и некоторые отступы.
Добавьте этот код в Ваш css-файл:
Если мы посмотрим на нашу страницу сейчас, то увидим следующее.
3. Шапка зафиксировалась. Вы можете промотать страницу вниз и убедиться в том, что она не движется.
Но, как Вы уже, наверное, заметили, часть нашего контента переместилась под шапку – так и должно быть, это особенность такого позиционирования. Скоро мы все расставим на свои места.
А пока давайте займемся стилями нашего сайдбара, который мы тоже собрались зафиксировать.
Нам нужно также определить для сайдбара ширину, задать ему фиксированное позиционирование, а также здесь мы воспользуемся свойством top, так как нам необходимо подкорректировать позицию блока сайдбара и сместить его под шапку (иначе он так и останется за шапкой). Я взяла для top значение 330px (300px – это высота нашей шапки и + еще 30 пикселей, чтобы шапка и сайдбар не были прилеплены друг к другу).
Это основное для позиционирования. Остальные стили придают цвет, рамку, отступы для текста, размер текста и т.д.
Добавьте вот этот код в Ваш файл таблицы стилей.
И вот, что у нас получится.
4. Вы можете видеть, что элементы зафиксировались, однако, текст нашего контента спокойно располагается под ними, как будто их и вовсе нет.
Это очень просто исправить, ведь мы знаем высоту нашей шапки и ширину сайдбара, а также ширину страницы. Ширина страницы равна 980px, а ширина сайдбара 200. Следовательно, мы можем задать для блока с контентом ширину равную 700px и сделать отступ от левого края 230 px (30 px чтобы блок с контентом не «прилипал» к сайдбару). А зная, что высота шапки равна 300px, мы можем задать и отступ сверху в 300px (здесь мы не берем больше, потому что заголовок в начале статьи уже автоматически имеет отступ сверху).
А также зададим простые стили для футера (только для того, чтобы определить его внешний вид).
Добавьте последний фрагмент кода в свой файл таблицы стилей и посмотрите результат.
Теперь можно скролить и скролить, а Ваша шапка и сайдбар всегда будут перед глазами.
На этом буду заканчивать. Исходники файлов Вы, как всегда, можете найти в Исходниках к уроку, а посмотреть эту страницу в браузере, можете нажав на кнопку «Демо» в начале урока.
Надеюсь урок был Вам полезен! Жду Ваших отзывов! Делитесь уроком с друзьями при помощи кнопок социальных сетей (буду очень признательна).
А также подписывайтесь на обновление блога, если Вы на него еще не подписаны. Дальше будет еще интереснее.
Успехов Вам, друзья, Хорошего Весеннего настроения и Удачных проектов!
Как сделать шапку сайта фиксированной и изменяющей размер
В этой статье я покажу, как сделать шапку сайта фиксированной и изменяющей размер при прокрутке. Приведенный вариант реализации может не работать в устаревших браузерах вроде IE5 или 6.
Реализация
Для начала нам нужна HTML-структура наподобие следующей:
Код CSS, приведенный ниже – это базовые стили заголовка.
В CSS-коде, приведенном выше, последние три блока имеют класс “.smaller”. Это сделает шапку меньше при прокрутке вниз. Но чтобы добавить класс “.smaller”, потребуется код jQuery:
После того, как вы добавите этот код в раздел и подключите библиотеку jQuery, шапка веб-страницы должна будет изменять свой размер при прокрутке вниз.
Чтобы сделать ее адаптивной, необходимо добавить несколько строк кода CSS:
Теперь при уменьшении размера окна браузера при ширине в 660 пикселей вы увидите, что логотип переместится в середину. При этом меню навигации «съедет» под логотип и расположится по центру.
Если вам понравилась эта статься, поделитесь ей со своими друзьями!
Дайте знать, что вы думаете по данной теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, подписки, лайки, отклики, дизлайки!
Пожалуйста, оставляйте свои комментарии по текущей теме материала. За комментарии, подписки, отклики, лайки, дизлайки низкий вам поклон!
Как закрепить шапку сайта при скролле страницы
Привет, друзья. Сегодня поговорим о том, как закрепить шапку сайта при прокрутке страницы. Наверняка вы все видели такой эффект, когда шапка сначала выглядит статичной, но когда вы начинаете изучать сайт и скролить, то она фиксируется в верхней части экрана и не покидает поле зрения.
При этом она может немного видоизменяться, меняя размер, цвет и содержимое. Давайте реализуем этот эффект, за который меня уже много лет «костерят» в комментариях из-за того, что тема раскрыта неполностью и исправим это недоразумение.
В свое время было недостаточно знаний, чтобы подробно проработать все нюансы, но теперь сделаю, практически, все популярные эффекты, которые могут понадобится при реализации этого блока.
Давайте начнем с того, что напишем какую-то стандартную разметку шапки, подключим jQuery, чтобы легче было манипулировать javascript и добавим скрипт, в котором и будем управлять состоянием и положением шапки.
Вот структура моего проекта.
HTML разметка шапки
Для примера я придумал такую структуру.
Слева логотип, название сайта и его описание, а справа контактные телефоны, кнопка обратного звонка и кнопка меню. Типичная разметка для многих сайтов.
Дабавим немного стилей и получим такой внешний вид.
Пока, тут нет никаких особенностей. Это обычная шапка без дополнительных эффектов.
Исходник для изучения разметки, стилей и кода, как обычно, в конце статьи.
Теперь давайте подключим перед закрывающим тегом «body» jQuery и скрипт, в котором и будем писать js-код для управления состоянием и положением шапки.
Итак, давайте начнем с простейшего, добьемся того, чтобы шапка принимала статическое положение и перекрывала контент, который должен находится под ней.
Чтобы это сделать, у нас есть несколько подходов. Первый заключается в том, чтобы при прокрутке добавить шапке определенный класс, с новыми стилями, а второй в том, чтобы добавлять и удалять их прямо в js. Я считаю, что основные манипуляции с CSS нужно делать в таблице стилей, поэтому пойду первым путем, но для этого нужно показать стили шапки, которые я задал, чтобы вы лучше понимали, что происходит. Вот они.
Так выглядят стили для обертки шапки и блок с ее содержимым. За счет такой структуры мы легко сделаем шапку фиксированной, а ее содержимое продолжит оставаться в центре на любом устройстве.
Как я уже говорил, для того чтобы «header» стал фиксированным при прокрутке, ему нужно поменять позиционирование на «fixed». Для этого, при помощи метода «scrollTop()» мы проверим значение прокрутки в окне браузера и в нужный момент добавим шапке класс, в котором и изменим позиционирование.
Звучит страшнее чем кажется. На самом деле все достаточно просто. Давайте в таблицу стилей добавим класс, при помощи которого шапка будет получать position: fixed.
Обратите внимание, что z-index для того, чтобы при позиционировании шапка была над остальными элементами, я задал непосредственно классу header немного ранее.
Теперь давайте перейдем к написанию скрипта. Открывайте файл scripts.js и добавьте следующий код.
Здесь мы создаем переменную header и присваиваем ей наш элемент, в котором расположена шапка, чтобы было легче и удобнее им манипулировать. Затем пишем функцию, которая следит за прокруткой, и если мы прокрутили больше чем на 1 пиксели от начала окна браузера, то элементу с классом header добавляем недавно созданный класс «header_fixed», который и фиксирует шапку в верхней области экрана.
Начало положено. Теперь шапка при прокрутке ведет себя так, как нам нужно было и успешно фиксируется. Но мне не нравится рывок, который заметен, когда мы меняем позиционирование. Попробуйте покрутить.
Давайте исправим это. Происходи такое резкое смещение из-за того, что шапка занимала 90 пикселей и, соответственно, смещала контент вниз на 90 писклей, а когда мы прокрутили, мы вырвали из общего потока этот элемент и все сдвигается на его высоту. Чтобы этого избежать, предлагаю body, во время того, как шапка становиться фиксированной, дать отступ в 90 пикселей, которые мы теряем. Только я не буду топорно зашивать эту высоту в скрипт, а автоматический вычислю ее высоту и буду использовать это значение в вычислениях.
Опять же звучит страшно и заумно, но посмотрите, как все просто.
В 3 строке я получаю число с высотой шапки. На 8 строке, добавлю отступ тегу body, равный высоте шапки, чтобы скомпенсировать ее, в тот момент, когда мы вырываем из общего потока шапку и минеям ей позиционирование.
Когда прокручиваем страницу обратно, и скрипт удаляет класс header_fixed, я также удалю и, теперь, лишний отступ у тега body.
Надеюсь, понятно объяснил и теперь у вас нет никакого рывка, при скролле, а шапка плавно фиксируется и позиционируется в верхней области экрана.
Изменение высоты шапки и цвета
Теперь давайте разбираться, как при прокрутке изменить высоту шапки. Это достаточно популярный эффект, о котором вы меня часто спрашивали.
Наверное, вы догадались уже, что никакой магии тут нет и делается все аналогично тому, как мы уже это проделали выше. Просто выбираем расстояние от верхней точки окна браузера, на котором должен произойти тот или иной эффект и добавляем или удалим класс, отвечающий за этот эффект.
Но давайте на этот раз я не буду задавать отдельный класс, а покажу как изменить стили прямо в js. Итак, задача при прокрутке на 300 пикселей при помощи jQuery плавно изменить высоту шапки и ее цвет.
Как видите, благодаря методу «.css» можно манипулировать стилями прямо из jQuery. Отступ был по 15 пикселей сверху и снизу, а я заменил его на 5, за счет чего шапка стала меньше на 20 пикселей. Цвет сделал бледно желтым, а при помощи свойства transition сделал эффект перехода из одного состояния в другое более плавным.
Как удалить/скрыть элемент из шапки при прокрутке страницы
Этот вопрос мне также периодически задавали в соцсетях, поэтому решил вынести его в отдельный пункт. Наверняка вы уже догадались, если дочитали статью до этого момента. Ничего нового, увы, тут не будет. Все также, как выше. Получим id или class элемента и добавим ему свойства для скрытия. Например «display: none» в простейшем случае.
Для примера давайте скроем один из номеров телефонов. Это будет сложнее, так как у обоих номеров одинаковый класс. Напомню, блок с контактами у меня выглядит так:
Теперь давайте в js напишем код, отвечающий за скрытие одного из номеров. Пусть это событие случается, когда мы прокрутили окно на 500 пикселей, но давайте, чтобы не повторятся, будем не просто стили менять или классом манипулировать, а воспользуемся методами fadeIn|fadeOut для плавного скрытия и появления элемента.
Вот, что мы получили:
Вот такой, достаточно простой эфеект получился. Надеюсь, все основные нюансы по закреплению шапки учел. Если будут еще какие-то вопросы, задавайте в комментариях.
Похожие публикации
12 комментариев
А есть еще что то похожее на эту тему?
При этом, шапка должна еще и видоизменяться уменьшаться, чтобы не закрывать всю страницу для пользователя.
Добрый день!
Подскажите, а как сделать, что бы менялся размер при прокрутке страницы в зафиксированном хедере?
Здравствуйте! А не подскажите, как сделать чтобы меню меняло цвет при фиксации сверху сайта. Чё то ни как не могу разобраться. Буду очень признателен Вам!
а если в шапке два блока, стоящих последовательно (float:left), как тогда зафиксировать?
(Для элемента с position: absolute или position: fixed нельзя одновременно устанавливать свойство float)
Андрей, добавить 2 элемента в общий div и уже его позиционировать.
Как создать фиксированный хедер с анимацией во время прокрутки страницы
Дата публикации: 2016-07-25
От автора: в этом уроке мы узнаем, как создать шаблон, который сейчас часто встречается на сайтах: фиксированный хедер, который плавно сжимается при прокрутке страницы. Начнем со структуры, а затем при помощи CSS и обычного JS заставим всю эту конструкцию работать. В самом конце мы коротко пробежимся по тому, как можно оптимизировать код, а также обсудим проблемы, которые встречаются у этого шаблона на сенсорных устройствах.
Чтобы вы поняли, что мы сегодня будем создавать, посмотрите демо ниже (или полноэкранную версию):
HTML разметка
Начнем мы со следующей разметки – хедер с тегом nav внутри и другими элементами:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
В элементе nav, который является частью хедера, содержатся еще три элемента: логотип, основное меню и кнопка плейсхолдер, по которой срабатывает адаптивное меню (на экранах уже 1061px). Обратите внимание: По клику на эту кнопку ничего не произойдет. Создание адаптивного меню не входит в тему урока.
Первичные стили CSS
Давайте взглянем на стили CSS и заставим нашу разметку двигаться:
Краткое объяснение самых важных правил:
элемент header имеет фиксированную позицию;
для позиционирования элемента nav используется flexbox;
логотипу заданы правила margin-top: 50px и margin-left: 50px, а также padding: 20px 30px;
главное меню расположено напротив логотипа, и ему заданы свойства margin-top: 50px и margin-right: 50px;
адаптивная кнопка скрыта и становится видима только, когда ширина окна меньше 1061px. Кроме того, заданы верхний и правый margin’ы в 10px;
свойствам, чье значение в будущем изменится, мы применили свойство transition. Таким образом достигается плавный переход от первичного к конечному состоянию.
С этими стилями хедер выглядит следующим образом:
Анимация хедера
Мы построили базовую структуру хедера. Теперь необходимо обсудить следующие шаги:
элемент main должен быть расположен прямо под хедером. Не забывайте, что у хедера задано свойство positioned: fixed, из-за чего он расположен сверху элемента main;
анимация к хедеру применяется во время прокрутки страницы вниз.
Чтобы решить первую задачу, к элементу main необходимо добавить свойство padding-top, значение которого должно быть равно высоте хедера. В нашем случае у нас нет точной фиксированной высоты хедера, поэтому для ее вычисления нам понадобится JS. После вычисления высоту уже можно добавлять соответствующий padding элементу main. Для решения второй задачи мы сделаем следующее:
вытягиваем количество пикселей, на которое был прокручен документ;
если число больше 150px, добавляем класс scroll к хедеру.
JavaScript
Ниже представлен необходимый JS код. Начнем мы с объявления парочки переменных, вычислим высоту хедера и добавим это значение в свойстве padding-top в элемент main:
Для этой демонстрации мы используем свойство offsetHeight, чтобы вытянуть высоту хедера. Не забывайте, что мы точно так же могли использовать метод getBoundingClientRect(). Стоит отметить, что данный метод может вернуть дробное значение. Теперь по поводу события прокрутки:
Для вычисления количества прокрученных в документе пикселей мы используем свойство pageYOffset объекта window. Данное свойство не работает в старых версиях IE (
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как только мы докручиваем до 150px, добавляются дополнительные CSS правила:
Мы делаем следующие изменения:
добавляем светло-серый box-shadow хедеру;
уменьшаем padding и font-size логотипа;
изменяем выравнивание флекс элементов вдоль оси;
удаляем margin у логотипа, меню и адаптивной кнопки.
Вышеописанный правила делает хедер таким:
Добавляем адаптивность
Как мы упоминали в предыдущем разделе, когда ширина окна становится меньше 1061px, мы прячем меню и показываем адаптивную кнопку (которая ничего не делает). Также вносятся дополнительные изменения в необходимые элементы. Ниже показан адаптивный хедер в первичном состоянии:
Необходимые CSS правила:
А тут показан хедер после анимации:
Вопросы производительности
Мы добились, чтобы наш хедер вел себя, так как было запланировано. Теперь давайте перейдем к следующему шагу и обсудим вопрос производительности.
В нашем примере код, отвечающий за анимацию хедера (т.е. callbackFunc), запускается по событию scroll. То есть код может вызываться сотни раз или даже больше. Такой подход может сильно повлиять на производительность, особенно когда в функции callbackFunc хранится много кода, который должен выполняться при прокрутке страницы вверх и винз. В нашем случае анимация простая, но представьте реальный сценарий, где мы хотим сделать более сложную анимацию. Например, изменить позицию элемента и т.д.
Что же можно сделать? Есть множество возможных решений, но сейчас давайте коротко обсудим одно из них. Необходимо добиться, чтобы наша функция выполнялась максимум один раз за 200 миллисекунд (значение произвольное). Для этого нам понадобится JS библиотека Lodash, в которой есть функция throttle.
Во-первых, необходимо подключить библиотеку (к счастью, есть возможность подключить только нужную функцию). Во-вторых, необходимо заменить строку:
Три варианта фиксации элемента на сайте на CSS/jQuery
Фиксирование элементов сейчас пользуется большой популярностью. Так, например, «Яндекс» или социальная сеть «ВКонтакте» (на момент написания статьи) фиксируют свое меню и поиск при прокрутке страницы. Вполне хорошее решение, позволяющее ограничить пользователя от лишних действий в получении доступа к нужному функционалу сайта и позволяющее сделать некий акцент на важных элементах.
Зафиксировать элемент на сайте можно несколькими способами, каждый из них хорош в своем случае.
Фиксация элемента на сайте на CSS
Самый простой вариант – это фиксация элемента на чистом CSS. Все, что вам нужно, это добавить следующие стили к элементу:
Положение в таком случае будет верхнее, по всей ширине экрана. Вариант отлично подходит для элементов, которые изначально находятся в самом верху (меню и поиск).
Если хотите поиграть с положением – измените значение свойств left, top, right и bottom соответственно.
Минусы – не подходит для элементов, находящихся ниже верхней границы сайта.
Здесь на помощь к нам приходит другое значение position – sticky. Оно фиксирует тот или иной элемент только в рамках первого родительского контейнера. Фиксация элемента при этом начнется тогда, когда верхняя граница элемента совпадет с верхней частью окна браузера, и завершится при достижении элементом конца родителя, при этом другие элементы (и даже окружаемый текст) не смещаются, что очень удобно в отдельно взятых случаях. Пример использования:
Эти стили вы присваиваете тому элементу, который хотите зафиксировать. Свойство top со значением «10px» говорит здесь о том, что при фиксации элемента необходимо сделать отступ от верхней границы в 10 пикселей.
Фиксация элемента на сайте при прокрутке страницы на jQuery
Этот вариант, в отличие от первого, фиксирует нужный вам элемент только тогда, когда его положение равняется верхней границе вашего экрана при прокрутке страницы.
Их вы вставляете без изменений. Отличный вариант для фиксации рекламных блоков или других элементов находящихся не в первых рядах.
Фиксация элемента на сайте при прокрутке страницы с остановкой в нужном месте на jQuery
Этот вариант является доработкой вышеуказанного способа. Я много видел сайтов, где в сайдбаре (боковой колонке сайта) фиксируются различные рекламные блоки. Все бы ничего, но при прокрутке страницы до самого низа такие блоки перекрывают футер (низ сайта) и зачастую препятствуют получению немаловажной информации или навигации в нем.
Чтобы исправить этот конфуз и удержать блок при достижении указанной области, и существует этот вариант.
Ну и те же стили из второго варианта с небольшим дополнением:
На что здесь стоить обратить внимание?