gubin_niko
@gubin_niko

Как не анимировать элемент (css), если документ прокручен на N пикселей?

Добрый день. Решил разобраться с анимацией на css (крутая штука... жалею, что многие вещи раньше не делал на css).

Сделал зафиксированную навигацию в шапке, которая после 300 (к примеру) пикселей с анимацией меняет фон и размеры. Работает круто, но есть пара нюансов, которые, в силу неопытности, без вас решить пока не могу...

Есть блок с классом "header". Из jQuery выставляю для него второй класс "minimized". В css для header прописаны первичные стили, а для header.minimized изменённые. Теперь проблема: если обновить страницу, когда она прокручена ниже 300px и навигация уже изменилась, происходит повторное анимирование от первичных стилей к вторичным. Это понятно, ибо установлен класс уже из jQuery и css чётко отрабатывает, что должен. Получается не критично, но и не очень красиво, ибо навигация "дрыгается" при обновлении страницы.

У меня были мысли при загрузке проверить позицию и выставить pre-minimize класс, который отключал свойство "transition" для header (временно, лишь на время первой проверки позиции), чтобы стили из "minimized" установились без анимации, но тогда из-за задержки возникает ещё более страшный "дрыг" - сперва видим стандартную навигацию, а после рывком переход к изменённым стилям))

Как вы решаете подобные задачи, или же забиваете на такие мелочи?
  • Вопрос задан
  • 164 просмотра
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
делай 2 класса. один который добавляется сразу при загрузке страницы, а второй по событию on scroll. первый чтобы менял навигацию без анимации, а второй с анимацией.
ну и во втором ставь условие, что если первый класс уже есть, то при on scroll ничего не делалось.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $