Компактная шапка сайта, как вернуть в прежний вид?

Question

[Даниил Сухих]

Есть шапка:
<div class="head"></div>

.head {
	top: 0;
	width: 100%;
	height: 200px;
	background: blue;
	position: fixed;
}

При прокрутке она уменьшается:

$(document).ready(function() {
	$(window).scroll(function() {
		$('.head').animate({
		height: "100px",
	}, 500);
	});
});

Полный код
Как сделать что-бы при прокрутке страницы в самый верх она снова принимала прежний вид?

Answer 1

[Serj-One]

Оформление в js - моветон. Подобные вещи делаются через добавление/удаление классов с нужными свойствами.

$(window).scroll(function() {
    var top = $(window).scrollTop();  
    if(top>0){
        $('.header').addClass('header--min');
    } else {
        $('.header').removeClass('header--min');
    }
});

Классом .header--min{} задавай изменения состояния.

Comments

[Даниил Сухих]

Что в классе min нужно писать?

[Даниил Сухих]

Всё, разобрался.

[alex-1917]

говорить "моветон" в 2018 - это неприлично

[Serj-One]

alex-1917, я что-то пропустил? Понятие дурного тона было отменено? Словари переписали?

[alex-1917]

Serj-One, ну так сначала обоснуйте свой моветон... что за бред - вы хотите выпилить половину методов джиквери и перейти на классы css??? тот же animate - 10 символов и происходит плавная анимация, причем кроссбрауз=1000%. А по вашей методе чтобы добиться такого же, надо во-первых расплодить js-код с 10 символов до аж 90, затем в css вместо НУЛЯ символов добавить две строки с разными классами - это еще 200 символов, плюс добавить плавность через наверное transition - это с тремя префиксами еще 300 символов. Или зачем плавность, главное хардкор. да? Итого карл плюс 600 символов с пустого места, да еще и не полный кроссбрауз. Плюс пара ошибок от валидатора на эти ваши transition в css. ЗАЧЕМ??!!!
да это даже не моветон, это порно чистой воды! Вы что, студент, признайтесь??

[Даниил Сухих]

alex-1917, Я так и не понял мне использовать addclass или animate?

[Serj-One]

danchiksux, классы. Товарищ застрял в 2010-м.

[Serj-One]

alex-1917,
Кроссбраузерность? https://caniuse.com/#search=transition - полная поддержка без всяких префиксов. Динозавра, не поддерживающего, сейчас уже не найти, но если такой и выползет из своей норы, этими единицами, если нет условия поддержки сильно устаревших, можно пренебречь. Считать символы? серьёзно? В чём смысл? Основной вес любой страницы - изображения, пара строк в коде - это даже не капля в море, это пара молекул воды в этой капле. Экономить сотню символов ради горе-оптимизации, ощутимо снижая удобство в разработке и поддержке? Но если уж упороться и начать считать, условие запуска анимации и обратной анимации нужно и с jq animate, а animate по символам таки длинней, даже если анимация всего одна, а обычно она не одна. А если на мобильном элемент должен иметь иной размер, что будешь делать? Писать вложенные условия по ширине окна и другие параметры анимации? Если меняется несколько свойств, будешь анимировать каждое?
Оформление - css, смена состояний - js, это практично, удобно, и, что самое главное, логично.