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

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

Я тоже видел такие сайты и понимал что эти эффекты сделаны при помощи 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
Оперативная память, различия, специфика, установка

Оперативная память в компьютере играет роль временного буфера хранения информации, то есть при запуске, какого либо приложения оно частично загружается в оперативную память, следовательно, чем

Интернет
help2site
Как сделать рерайт текста и не облажаться

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

Web-Дизайн
help2site
Вкладки (Табы/Tabs) на чистом CSS

Вкладки (Табы/Tabs) на чистом CSS с интересным эффектом появления — исчезновения, из минусов высоту вкладки нужно задавать в ручную. Идея построения закладок на одном CSS

Web-Дизайн
help2site
Разделы документа в HTML 5.1

Это перевод статьи «Document Outlines in HTML 5.1», опубликованной на bitsofco.de. Оригинальную статью можно прочитать здесь. В стандарте HTML 5.1. есть определённое количество изменений, два из которых

Игры
help2site
Poker для ipad

Большое количество людей ринулось покупать планшетные компьютеры от Apple, так как они являются на данный момент самыми лучшими и известными. И у некоторых возникает вопрос: