Как не анимировать элемент (css), если документ прокручен на N пикселей?
Добрый день. Решил разобраться с анимацией на css (крутая штука... жалею, что многие вещи раньше не делал на css).
Сделал зафиксированную навигацию в шапке, которая после 300 (к примеру) пикселей с анимацией меняет фон и размеры. Работает круто, но есть пара нюансов, которые, в силу неопытности, без вас решить пока не могу...
Есть блок с классом "header". Из jQuery выставляю для него второй класс "minimized". В css для header прописаны первичные стили, а для header.minimized изменённые. Теперь проблема: если обновить страницу, когда она прокручена ниже 300px и навигация уже изменилась, происходит повторное анимирование от первичных стилей к вторичным. Это понятно, ибо установлен класс уже из jQuery и css чётко отрабатывает, что должен. Получается не критично, но и не очень красиво, ибо навигация "дрыгается" при обновлении страницы.
У меня были мысли при загрузке проверить позицию и выставить pre-minimize класс, который отключал свойство "transition" для header (временно, лишь на время первой проверки позиции), чтобы стили из "minimized" установились без анимации, но тогда из-за задержки возникает ещё более страшный "дрыг" - сперва видим стандартную навигацию, а после рывком переход к изменённым стилям))
Как вы решаете подобные задачи, или же забиваете на такие мелочи?
делай 2 класса. один который добавляется сразу при загрузке страницы, а второй по событию on scroll. первый чтобы менял навигацию без анимации, а второй с анимацией.
ну и во втором ставь условие, что если первый класс уже есть, то при on scroll ничего не делалось.
Простой
