Пытаюсь закостылить плавно появляющеся меню, как это сделать?

Question

[newhacke]

Вообщем суть такова. что надо сделать подобное этому https://markgoodyear.com/labs/headhesive/
Самое важное что бы ничего не дергалось не прыгало ниначто не влило, решения, вроде нижнему блоку задавать какие отступы не актуальны. У меня фактически получилось, но когда поднимаешь вверх, на этом брейке он просто исчезает, как сделать так что бы он плавно задвигался обратно?? Благодарен за внимание!

Answer 1

[Ilya Olovyannikov]

Вот это вешаем на баннер:
position: fixed;
transform: translateY(-100%);
transition: all 300ms ease-in-out;

По JS'у добавляем класс к блоку, к которому привязана выпадашка, на классе выпадашки translateY 0%

Comments

[Ilya Olovyannikov]

https://codepen.io/Olovyannikov/pen/gOaLOoZ

[newhacke]

как просто!!!! Я костылили как мог что бы не было багов а тут..) Спасибо отдуши))

[newhacke]

То есть получается мы делаем клона самого меню??

[Ilya Olovyannikov]

newhacke, Ты можешь скрывать/показывать блоки, какие тебе надо уже стилизованные как надо. Задача JS тут только вешать классы "показать/скрыть". Анимация сделана средствами CSS
Удачи! :))

[Ilya Olovyannikov]

cannibal_corpse, если внимательно посмотришь на мой код, то увидишь, что блоки с контентом и блок-выпадашка это два разных блока