Изменение размера шапки при прокрутке

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

Я тоже видел такие сайты и понимал что эти эффекты сделаны при помощи JavaScript, а так как я не слишком силен в данном языке программирования я не торопился в этом разобраться, но когда возникла безвыходная ситуация и пришлось все таки углубиться в этот вопрос все оказалось не так уж и страшно. В этой статье я хочу поделиться своим опытом, как при минимальном знание JavaScript создать эффект уменьшения header (хедера) при прокрутке окна браузера.

Первым делом напишем простенький HTML код для наших экспериментов:

  1. оформим его опять таки при помощи не сложного CSS
				
					.wrap {
height:1000px;
background:green;
}
.header {
height:50px;
background:blue;
position:fixed;
}
.header > a {
color: #ccc;
font-size:2em;
}
				
			
  1. Ну а теперь изюминка, JavaScript:
				
					$(window).scroll(function(){
if ($(window).scrollTop() > 400) {
$('.header').addClass('scroll');
}
else {
$('.header').removeClass('scroll')
}
});

				
			

Давайте разберемся подробнее, что мы делаем при помощи указанного выше скрипта: мы добавляем при скролле диву с классом .header дополнительный класс .scroll на который мы можем повесить любые стили CSS , например:

				
					.header .scroll a {
font-size:1em;
}
				
			

На этом все, дальше включайте фантазию и у вас все получиться.

В конце приведу код примера полностью:

				
					<html>
<head>

<meta charset="utf-8">

<title></title>

<style>
.wrap {
height:1000px;
background:green;
}
.header {
height:50px;
background:blue;
position:fixed;
}
.header > a {
color: #ccc;
font-size:2em;
}
.header.scroll a {
font-size:1em;
}
</style>

</head>

<body>
<script>

$(window).scroll(function(){
if ($(window).scrollTop() > 400) {
$('.header').addClass('scroll');
}
else {
$('.header').removeClass('scroll')
}
});

</script>

<div class='wrap'>
<div class='header'>
<a href='#'>link</a>
</div>
</div>
</body>
</html>
				
			
Свежие записи
Оборудование
help2site
Как узнать какая у меня видеокарта

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

Windows
help2site
Что делать, если Svchost сильно грузит процессор?

Svchost.exe (сервис-хост) или хост-процесс для служб Windows — компонент операционных систем Microsoft, используемый для запуска и выполнения служб из dll-файлов (динамически подключаемых библиотек). Если по-простому,

Web-Дизайн
help2site
Как правильно подключить шрифт от GoogleFonts

Используя пресеты шрифтов от google fonts разработчики редко заглядывают в код генерируемого css файла. А зря, там самое интересное.  Я хочу рассказать как избежать распространенных

Оборудование
help2site
Описание центрального процессора компьютера

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

Web-Дизайн
help2site
Добавить нового клиента в Bill manager

Входим в Bill manager, переходим в пункт меню Клиент—> Клиенты —> иконка Создать Откроется форма Регистрации клиента, вносим данные Клиента Добавим нового клиента в соответствующую

Настройка
help2site
Сигналы биос при включении пк

Сборник сигналов БИОС Оглавление Как определить какие сигналы БИОС передает нам? При каждом запуске компьютера мы слышим одинарный писк, он пищит не просто так, прежде