Using snap to scroll and hide/show header on scroll at the same time?

Solution for Using snap to scroll and hide/show header on scroll at the same time?
is Given Below:

I’ve coded two version of the same homepage: On one snap to scroll works perfectly and on the other the header navigation hides when I scroll down and shows when I scroll up.

The Problem is that I can’t get them work together since I have to remove the “overflow: scroll” and “height: 100vh” for the menu hiding to work but this will stop the snap to scroll to function.

<header>
    <nav>
        Navigation
    </nav>
</header>
    
<main>
    <article>
        <section class="a">
        </section>
        <section class="b">
        </section>      
        <section class="c">
        </section>
    </article>
</main>
    
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {
        'use strict';           
        var c, currentScrollTop = 0,
            navbar = $('nav');
        $(window).scroll(function() {
            var a = $(window).scrollTop();
            var b = navbar.height();
            currentScrollTop = a;           
            if (c < currentScrollTop && a > b + b) {
                navbar.addClass("scrollUp");
            } else if (c > currentScrollTop && !(a <= b)) {
                navbar.removeClass("scrollUp");
            }
            c = currentScrollTop;
            console.log(a);
        });         
    });
</script>

and these are my styles:

body {
     margin: 0;
}
nav {
     border-bottom: 0.05rem solid black;
     height: 5rem;
     line-height: 5rem;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 10000;
     transition: all 0.5s;
}
nav.scrollUp {
     transform: translateY(-6rem);
}
nav ul {
     display: flex;
     justify-content: space-between;
     margin: 0;
     padding: 0;
}

article {
     display: flex;
     flex-wrap: wrap;
     scroll-snap-type: mandatory;
     scroll-snap-type: y mandatory;
     overflow: scroll;
     height: 100vh;
}
section {
     scroll-snap-align: start;
     height: 100vh;
     width: 100vw;
}
section.a {
    background-color: pink;
}
section.b {
     background-color: tomato;
}
section.c {
     background-color: yellow;
}

I already used three different js scripts for the header but all came down to the same problem: the overflow/height-styles in the article selector.

any ideas how to get this to work?
thank you in advance!