Полноэкранный скор отдельных элементов
 

Здравствуйте, Есть 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>

Если есть готовые варианты решения, скиньте пожалуйста, так как подходящего не нашел