One page scroll и проблемы с анимированым меню?

Question

[Сергей Кошкин]

Использую на сайте плагин onepagescroll (https://github.com/peachananr/onepage-scroll)
И нужно что бы в каждом section была кнопка для менюшки, и менюшка выезжала сверху и выглядела вот так после нажатия кнопки меню(гамбургер)
Нашел занятную менюшку, но проблема в том что она работает по принципу сss анимации transform: translateY и работает только на самой первой section. Есть идеи как заставить выезжать ее в текущем экране(или может есть другие готовые варианты реализации подобной менюшки в паре с One page scroll).

Answer 1

[Гарольд]

Абсолютное позиционирование используй и вынеси код "менюшки" из родителя однастраницаскролл

Comments

[Сергей Кошкин]

как раз из-за position:absolute он и открывается только на первом "экране".

[Гарольд]

Сергей Кошкин: z-index какой?

[Сергей Кошкин]

дык, а z-index чем поможет?будь о 0 или 999999 он все равно будет только в первой секции отображаться.

[Гарольд]

Сергей Кошкин: абсолютная позиция и слой (z-index) поверх других помогут. А так, нужно смотреть код. И повторюсь: весь код меню надо вынести за пределы кода со слайдером

[Сергей Кошкин]

Прошу прощения, упустил из внимания момент с "...за пределы кода со слайдером". Но тут другой нюанс, на первом "слайде" менюшка не нужна, а уже после прокрутки вниз к следующему(и на последующих) она должна быть.
if ($('body').hasClass('viewing-page-1')) {
$('.cd-stretchy-nav').addClass('hide')
} else {
$('.cd-stretchy-nav').removeClass('hide');
}

[Гарольд]

$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop()>$(".slide1").height()-$(".slide1").height()){
$(".menu").addClass("is-visible");
}
else
{
$(".menu").removeClass("is-visible");
}
});
});

При прокрутке первого слайда (всей высоты) , добавляем класс is-visible к .menu
Изначально .menu не скрыто, после is-visible делает его видимым
Так же можно добавить transition, что бы плавно появлялся блок.