Главная » Эффекты для сайта » Как с помощью CSS3 и JQuery создать анимированный «прилипающий» заголовок?

Как с помощью CSS3 и JQuery создать анимированный «прилипающий» заголовок?

2016-06-02 / Вр:01:06 / просмотров: 4538

Здравствуйте, друзья!
Трудно себе представляете, в чем заключается этот эффект?
Заголовок, который прилипает к верхней части окна просмотра, при прокрутке страницы, будет уменьшаться и прилепляться к левой части экрана.
Мда, тяжело объяснить эффект на словах, поэтому для вас, читатели bloggood.top, есть демонстрация эффекта. Будьте любезны перейти и посмотреть, как все должно выглядеть в конечном результате.

[демонстрация экрана]

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

В HTML:

<header>
<h1>Просто заголовок</h1>
</header>
<p>куча инфы</p>

В CSS:

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

-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.sticky {
position: fixed;
font-size: 24px;
line-height: 48px;
height: 48px;
width: 100%;
background: #efc47D;
text-align: left;
padding-left: 20px;
}

/* Вспомогательные стили */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
header { display: block; }
body {
background-color: #f5f5f5;
line-height: 1;
text-align: center;
}

JS (как подключить библиотеку jquery читайте тут):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
</script>