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

Разместил / Просмотров: 11 369 / комментариев 17

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

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

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

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

HTML

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

<header><h1>Прикреплённая шапка сайта</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />

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

Код jQuery

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

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

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

$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});

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

CSS

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

header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}

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

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

header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
}

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

Ну а сейчас давайте добавим немного анимации нашему переходу с помощью transition. Вот код:

transition: all 0.4s ease;

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

Заключение

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

Вот и всё :) Пока пока. :)

  • Дмитрий

    Указываю «scrollTop() > 100%){»
    И почему-то не работает :(

  • А что именно Вы хотите сделать?

  • Дмитрий

    Допустим, у меня при входе на сайт виден блок размерами 100% в ширину и 100% в высоту. Хочу, чтобы после прокрутки этого блока менялся цвет навбара.
    По уроку все работает, но когда добавляю значение в %, то скрипт работать отказывается.

  • Я не программист, но мне кажется эти значения нужно добавлять в стили.

  • Андрей

    scrollTop должно принимать только абсолютное числовое значение значение.
    В вашем случае можно сделать так:
    1)узнать конкретную высоту секции, которая 100% высоты экрана, с помощью jquery
    2) сравнивать высоту scrollTop окна уже с известной высотой
    пример:

    $(window).scroll(function() {
    var blockh = $(‘.XXX’).scrollTop();
    if ($(this).scrollTop() > blockh){
    $(‘header’).addClass(«sticky»);
    }
    else{
    $(‘header’).removeClass(«sticky»);
    }
    });

    XXX — это класс или id или просто тег элемента, который занимает 100% высоты

  • Андрей

    Вру —

    var blockh = $(‘XXX’).height();

    так должно сработать

  • Даже не знаю что и сказать :)

  • Дмитрий

    Большое спасибо!
    Все работает!
    Но все же, не знаете ли Вы как сделать, чтобы объект менял свои свойства при определенном скролле в %?

  • Если бы знал, уже сказал :)

  • Андрей

    К сожалению вам всегда нужно будет находить абсолютные значения высоты. Хотя есть идейка, но не знаю сработает ли:

    1)находим значение высоты всего документа

    2) высчитываем нужные проценты из него

    $(window).scroll(function() {
    var fullheight = $(‘html’).height();
    var needprocent = fullheight*0.35;
    if ($(this).scrollTop() > needprocent){
    $(‘header’).addClass(«sticky»);
    }
    else{
    $(‘header’).removeClass(«sticky»);
    }
    });

    0.35 — это 35% высоты документа для примера взял

  • кодировку на примере поправить бы

  • А что с ней не так? :)

  • В Хроме и опере нормально, а какой браузер?

  • Николай

    Александр, добрый день!
    Я как просто зафиксировать шапку сайта, ту, что уже есть? Без анимаций и смены шрифтов.

  • Здравствуйте, для стилей шапки задайте position: fixed; и всё

  • Павел

    народ, не могу понять что к чему. этот пост я нашёл в категории WordPress, а что куда прописывать не понимаю. ну CSS понятно, в style.css, а с остальным что? подскажите, что делать? или где такие азы конкретно прочитать?