Full screen scroll for elements

Full screen scroll for elements
0

#1

Hi. Sorry for my English but I need help, and russian forums does not help me.
I have 2 blocks into header with height 100vh, and I need that for any type of scroll (slider, wheel, keys), these 2 blocks were flipped.

<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:0665405149">066 540 51 49</a>
                <a href="tel:0671800161">067 180 01 61</a>
            </p>
        </div>
    </div>
</header>
<main>
...

That is, if we are at the top of the page and scroll down, scrolling goes to block #b_txt, if we are on the #b_txt block and scroll up, the scrolling goes to the #logo_block block. If we is down, the need normal scroll.

Here’s what I wrote for this, but it code does not work correctly

<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>

If there are ready-made solutions, skinte please, since I did not find a suitable one