Здравствуйте, Есть 2 блока в шапке с высотой 100vh; Нужно что бы при любом типе скролла (ползунок, колесико, клавиши), эти 2 блока перелистывались.
<header id="head">
<div class="content">
<div class="logo section" id="logo_block">
<img src="images/logo.png" alt="ForYou">
</div>
<div id="b_txt" class="text revealator-slideup section">
<h1>Наращивание ногтей, гель лак <br>Кривой Рог</h1>
<p>
<a href="tel:066540****">066 540 ** **</a>
<a href="tel:067180****">067 180 ** **</a>
</p>
</div>
</div>
</header>
<main>
...
о есть если мы находимся вверху страницы и скролим вниз, прокрутка идет до блока #b_txt, если мы находимся на блоке #b_txt и скролим вверх, прокрутка идет к блоку #logo_block. Если мы скролим ниже, работает обычный скролл.
Вот что я написал для этого, но работает это не корректно
<script>
var lastScrollTop = $(window).scrollTop();
$(window).scroll(function(){
var st = $(this).scrollTop();
if (st > lastScrollTop && lastScrollTop == $('#logo_block').offset().top) {
$('body,html').animate({ scrollTop: $('#b_txt').offset().top }, 1100);
} else if (st < lastScrollTop && lastScrollTop <= $('#b_txt').offset().top) {
$('body,html').animate({ scrollTop: $('#logo_block').offset().top }, 1100);
}
lastScrollTop = st;
console.log(lastScrollTop);
});
</script>
Если есть готовые варианты решения, скиньте пожалуйста, так как подходящего не нашел
