Как сделать плавное выдвижение шапки сайта?

Question

[zekin375]

Есть шапка на сайте через js добавляю и убираю ей класс кодом, при скроллинге вверх и убираю при скроллинге вниз. Но не могу не как разобраться как мне остановить таймер если пользователь листает то вниз то вверх шапка не пропадала и как сделать плавное ее выдвижение сверху, помогите пожалуйста.

scrollPrev = 0;

$(window).scroll(function() {
	var scrolled = $(window).scrollTop();

	if ( scrolled > 100 && scrolled < scrollPrev ) {
		$('#fix').addClass('fix_panel');
	} else {
		setTimeout (function(){
		$('#fix').removeClass('fix_panel');
         }.bind(this), 4000);
	}

	scrollPrev = scrolled;
});

.fix_panel{
  position: fixed;
  width: 100%;
  z-index: 99999999;
  top: 0;
}
.fix.header_4.out {
  transform: translateY(-100%);
}

Comments

[Владимир]

если пользователь листает то вниз то вверх шапка не пропадала и как сделать плавное ее выдвижение сверху,

Можно подробнее, или пример.

[Михаил]

transition transform

[zekin375]

Владимир, https://jsfiddle.net/yd7co5e0/

Answer 1

[Арсений Матыцин]

Анимация на стороне CSS достигается через transition (в данном кейсе). До кучи можно почитать в принципе про переходы.

Comments

[zekin375]

Читал и искал способы не получается, прежде чем сюда написал сидел пытался сам решить долго время.

Если не сложно покажите пожалуйста как это реализовать

[Арсений Матыцин]

zekin375, либо менять логику (я внимательно глянул код, в котором ты себе просто изрешетил ноги выстрелами), чтобы отрабатывало на transition-ах (или анимацией прямо в JS), либо опять же менять логику, чтобы работать могло через animation.

Оба варианта в принципе правильные, неправильное в данном «уравнении» только то, как ты собрал логику и CSS.

[zekin375]

Арсений Матыцин, Большое спасибо принцип понял