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

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

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

Попробуем решить непростую задачу когда нужно обновить БИОС без процессора на материнской плате. Что такое BIOS и как им пользоваться, если коротко, самостоятельная микропрограмма, отвечающая за

Оборудование
help2site
Что такое блок питания компьютера?

Блок питания компьютера — что это? Блок питания компьютера это энергетический центр, именно он питает электричеством все комплектующие компьютера, и позволяет ему работать. Это в

Оборудование
help2site
Обзор видеокарты Intel Graphics Media Accelerator 4500M

Intel Graphics Media Accelerator 4500M – встроенная графическая карта, которая поддерживает DirectX 10. Разрабатывалась данная модель карты специально для недорогих ноутбуков. Если сравнивать с GMA

Оборудование
help2site
GTX 1050 Ti и GTX 1650 cравнение видеокарт

GTX 1050 Ti vs GTX 1650 Сравниваем! Оглавление NVIDIA GeForce GTX 1050 Ti Требования к мощности являются разумными, и это очень эффективно по сравнению с