Как закрепить шапку веб-сайта при скролле странички

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

При всем этом она может мало видоизменяться, меняя размер, цвет и содержимое. Давайте реализуем этот эффект, за который меня уже много лет «костерят» в комментах из-за того, что тема раскрыта неполностью и исправим это недоразумение.

В свое время было недостаточно познаний, чтоб тщательно проработать все аспекты, но сейчас сделаю, фактически, все пользующиеся популярностью эффекты, которые могут пригодится при реализации этого блока.

Давайте начнем с того, что напишем какую-то обычную разметку шапки, подключим jQuery, чтоб легче было манипулировать javascript и добавим скрипт, в котором и будем управлять состоянием и положением шапки.

Вот структура моего проекта.

HTML разметка шапки

Для примера я вымыслил такую структуру.

Слева логотип, заглавие веб-сайта и его описание, а справа контактные телефоны, клавиша оборотного звонка и клавиша меню. Обычная разметка для почти всех веб-сайтов.

Дабавим мало стилей и получим таковой наружный вид.

Пока, здесь нет никаких особенностей. Это рядовая шапка без доп эффектов.

Исходник для исследования разметки, стилей и кода, как обычно, в конце статьи.

Сейчас давайте подключим перед закрывающим тегом «body» jQuery и скрипт, в котором и будем писать js-код для управления состоянием и положением шапки.

Итак, давайте начнем с простого, добьемся того, чтоб шапка воспринимала статическое положение и перекрывала контент, который должен находится под ней.

Чтоб это создать, у нас есть несколько подходов. 1-ый заключается в том, чтоб при прокрутке добавить шапке определенный класс, с новенькими стилями, а 2-ой в том, чтоб добавлять и удалять их прямо в 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 сделал эффект перехода из 1-го состояния в другое наиболее плавным.

Как удалить/скрыть элемент из шапки при прокрутке странички

Этот вопросец мне также временами задавали в соцсетях, потому решил вынести его в отдельный пункт. Наверное вы уже додумались, если прочитали статью ранее момента. Ничего новейшего, как досадно бы это не звучало, здесь не будет. Все также, как выше. Получим id либо class элемента и добавим ему характеристики для скрытия. К примеру «display: none» в простом случае.

Для примера давайте скроем один из номеров телефонов. Это будет труднее, потому что у обоих номеров однообразный класс. Напомню, блок с контактами у меня смотрится так:

Сейчас давайте в js напишем код, отвечающий за скрытие 1-го из номеров. Пусть это событие случается, когда мы прокрутили окно на 500 пикселей, но давайте, чтоб не повторятся, будем не попросту стили поменять либо классом манипулировать, а воспользуемся способами fadeIn|fadeOut для плавного скрытия и возникновения элемента.

Вот, что мы получили:

Вот таковой, довольно обычной эфеект вышел. Надеюсь, все главные аспекты по закреплению шапки учел. Если будут еще какие-то вопросцы, задавайте в комментах.

Как создать прикреплённую и анимационную шапку веб-сайта на CSS3 и JQuery

Я думаю, что почти все из Вас уже увидели, что на данный момент в тенденцию входят всё больше липких частей дизайна, которые остаются на виду при прокрутке странички юзером. Как по моему это весьма комфортно, в особенности если это навигация веб-сайта. Вот конкретно таковой пример мы сейчас и будем созодать. Мы узнаем как создать анимационную шапку веб-сайта на JQuery и CSS3 с анимацией.

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

Но для начала охото сказать большущее спасибо http://www.webdesignerdepot.com ну а сейчас давайте буквально начнём.

Демо Ι Скачать

HTML код весьма и весьма обычной, нам просто необходимо задать теги для шапки веб-сайта, и дальше меж ними написать содержимое веб-сайта:

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

Код jQuery

CSS является самым наилучшим методом реализации анимации и переходов в истинное время. Так что скриптов мы будем применять минимум, и то для того чтоб задать определение срабатывания анимации при прокрутке странички.

Когда значение положения странички при прокрутке больше чем 1, это значит, что юзер прокрутил страничку и необходимо добавить класс «sticky» к тегу шапки веб-сайта. Таковым образом срабатывает анимация и фиксируется шапка веб-сайта.

А вот и сам код:

Принципиально отметить, что внедрение jQuery в данном примере не весьма отменная затея, потому что если в браузере будет отключено внедрение скриптов, тогда шапка веб-сайта будет просто фиксированная и всё.

CSS код будет состоять из 2х частей. 1-ый код будет отвечать за обычную шапку веб-сайта, которая находится в положении по дефлоту. 2-ой код будет отвечать за отображение шапки, когда юзер будет прокручивать страничку. Давайте поглядим как смотрится код по дефлоту:

Сейчас самый увлекательный момент: когда юзер прокручивает страничку вниз, тогда будет применяться класс .sticky, которому мы можем задать совсем различное отображение, на которое лишь способно CSS. Мы так же установим фиксированную позицию, что бы наша шапка веб-сайта была постоянно на виду.

При помощи этих CSS правил, которые ниже, мы желаем уменьшить площадь самой шапки при прокрутке, поменять цвет и естественно же уменьшить шрифт. Вот сам код:

Это самый обычной пример, при помощи которого Вы должны осознать сущность работы. Всё зависит от конструкции Вашего веб-сайта.

Ну а на данный момент давайте добавим мало анимации нашему переходу при помощи transition. Вот код:

Демо Ι Скачать

Заключение

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