@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%);
}


  • Вопрос задан
  • 847 просмотров
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
Анимация на стороне CSS достигается через transition (в данном кейсе). До кучи можно почитать в принципе про переходы.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы