Nieprawidłowy kod JSS - header na reaguje na scroll-up/ down

Panowie, mam problem z ustawieniem sekcji nawigacyjnej w sposób aby dzięki JSS na scroll-down sekcja się chowała, a scroll-up opuszczała w dół do wizerunku dla użytkownika.

Działa tylko jedna funkcja poleceń dla pojawiania się menu z prawej strony i chowania się głównej sekcji nawigacji na button.

Funkcja dla scrollowania nie działa. :( Uncaught SyntaxError : Unexpected Token '<'

Pomożecie ?

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
        integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <meta name="description" content="">

    <meta name="keywords" content="">
    <title>Document</title>


    <!--FONT-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">

    <!--CSS-->
    <link rel="stylesheet" href="/metabiome.css">

    <!--JAVA-->
    <script type="text/javascript" src="observers.js"> </script>

    <!--FONTAWESOME-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
        integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>


<body>

    <header>
        <div class="header">
            <div class="navbar">
                <a href="index.html"><img class="logo" src="/Logo/Metagen_1.0.png"></a>
                

                <div class="menu">
                    <ul>
                        <li><a href="index.html">Start</a></li>
                        <li><a href="onas.html">O nas</a></li>
                        <li><a href="programy.html">Programy</a></li>
                        <li><a href="#badania">Laboratorium</a></li>
                        <li><a href="kontakt.html">Kontakt</a></li>
                    </ul>
                </div>

                <div class="toggle"></div>

                <div class="menu2">
                    <a href="index.html"><img class="logo3" src="/Logo/Metagen_1.0.png"></a>
                    <ul>
                        <li><a href="index.html">Start</a></li>
                        <li><a href="onas.html">O nas</a></li>
                        <li><a href="programy.html">Programy</a></li>
                        <li><a href="badania.html">Laboratorium</a></li>
                        <li><a href="kontakt.html">Kontakt</a></li>
                    </ul>
                </div>  
            </div>
        </div>
    </header>
    

    
    <script>

        const body = document.body;
            let lastscroll = 0;

            window.addEventListener('scroll' , () => {
                const currentScroll = window.pageYOffset

                if (currentScroll <= 0 {
                    body.classList.remove("scroll-up")
                }

                if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
                    body.classList.remove("scroll-up")
                    body.classList.add("scroll-down")
                }

                if (currenScroll < lastScroll && body.classList.contains("scroll-down")){
                    body.classList.remove("sroll-up")
                    body.classList.add("sroll-down")
                }

            
                lastScroll = currentScroll;

            })
    </script>

    <script>
        
        const menuToggle = document.querySelector('.toggle')
        const menu = document.querySelector('.menu')
        const menu2 = document.querySelector('.menu2')
        const logo = document.querySelector('.logo')
        
        const innerheader = document.querySelector('.innerheader')


            menuToggle.addEventListener('click', () => {
        
            menuToggle.classList.toggle('active')
            menu.classList.toggle('active')
            menu2.classList.toggle('active')
            logo.classList.toggle('active')

        })

    </script>

   
    
</body>




</html>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root{

    --primary-color:
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;

    list-style: none;
    text-decoration: none;
}

html{
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body{
    height: 400vh;
    width: auto;
    overflow: hidden;
  
  background-color: green;
}

/* Header &  Menu & Logo */

.header{
    width: auto;
    height: auto;
}

.navbar{
    width: 100%;
    height: 100px;

    padding: 40px 200px;

    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;
    
    display: flex;
    align-items: center;

    transition: 0.5s;

    background-color: #012F4A;
}
.navbar a{
    height: 30.84px;

    align-items: center;
}

.menu {
    width: 550px;

    position: absolute;

    top: 40px;
    left: 352px;  
}
.menu.active {
    display: none;
}
.menu ul{
    display: flex;

    position: relative;

    justify-content: space-between;
}
.menu ul li{

    width: auto;
    height: auto;

    position: relative;
}
.menu ul li a {
    text-decoration: none;
    font-size: 1.1em;
    color: white;

    font-weight: 400;

    transition: 0.25s;

    letter-spacing: 1px;
}
.menu ul li a::before{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: white;
    transform-origin: middle;
    transition: transform 0.25s ease-out;
}
.menu ul li a:hover::before{
    transform: scaleX(1);
    transform-origin: middle;
}

.menu2 {

    width: 212.84px;
    height: 100vh;

    padding: 0 40px;
    position: absolute;

    top: 0px;
    right: 0px;

    display: flex;

    flex-direction: column;

    background-color: #012F4A;

    transform: translateX(212.84px);

    transition: 0.4s;
}
.menu2.active{
    transform: translateX(0px);
}
.menu2 ul{
    width: 100%;
    height: 100vh;

    flex-direction: column;

    display: flex;
    justify-content: space-between;

    padding: 325px 0px;
}
.menu2.active ul{

    width: 100%;
    flex-direction: column;

}
.menu2 ul li a {
    width: 100%;

    color: white;
    font-size: 1.2em;
    font-weight: 500;

    transition: 0.25s;
}
.menu2 ul li a:hover{
    color: #9d0208;
    font-size: 1.3em;
}

.logo{
    width: 112px;
    height: 30.84px;

    align-items: center;

    cursor: pointer;

    object-fit: cover;

    transform: scale(1);
    
    transition: 0.25s;
}
.logo:hover{
    transform: scale(1.025); 
}
.logo.active{
    display: none;
}
.logo3{

    width: 112px;
    height: 30px;

    object-fit: cover;

    position: absolute;

    top: 40px;

    transform: scale(1); 

    transition: 0.25s;

    cursor: pointer;
}
.logo3:hover{
    transform: scale(1.025); 
}

.toggle{
    width: 20px;
    height: 30.84px;

    position: absolute;

    top: 40px;
    right: 200px;

    background-color: white;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;

    filter: invert(1);

    cursor: pointer;
}
.toggle.active {

    background-color: white;
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center;

    right: 252.84px;

    filter: invert(1);
}

/*** scroll styles header ***/

.scroll-down header {
    transform: translate 3d (0, -100%, 0);
}

    .scroll-up header{
        filter: drop-shadow(0 -10 20px rgb(170,170,170))

    }

<script>
        
        const menuToggle = document.querySelector('.toggle')
        const menu = document.querySelector('.menu')
        const menu2 = document.querySelector('.menu2')
        const logo = document.querySelector('.logo')
        
        const innerheader = document.querySelector('.innerheader')


            menuToggle.addEventListener('click', () => {
        
            menuToggle.classList.toggle('active')
            menu.classList.toggle('active')
            menu2.classList.toggle('active')
            logo.classList.toggle('active')

        })

const body = document.body;
            let lastscroll = 0;

            window.addEventListener('scroll' , () => {
                const currentScroll = window.pageYOffset

                if (currentScroll <= 0 {
                    body.classList.remove("scroll-up")
                }

                if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
                    body.classList.remove("scroll-up")
                    body.classList.add("scroll-down")
                }

                if (currenScroll < lastScroll && body.classList.contains("scroll-down")){
                    body.classList.remove("sroll-up")
                    body.classList.add("sroll-down")
                }

            
                lastScroll = currentScroll;

            })

    </script>

Poniżej załączam kod i link do edytora kodu online:

https://codepen.io/pen/

dzięki, poprawiłem i sam jeszcze znalazłem dwa błędy mianowicie w trzecim warunku "if"

odwróciłem scroll-up na scroll-down i

to samo niżej scroll-down na scroll-up

if (currentScroll < lastScroll && body.classList.contains("scroll-down")){

body.classList.remove("scroll-down")

body.classList.add("scroll-up")

Niestety w dalszym ciągu nie działa, załączam update poprawek. Ewidentnie klasa z CSS
scroll-up/down jest już przypisywana jednak w dalszym ciągu nic się niedziała :(

<script>

        const body = document.body;
            let lastScroll = 0;

            window.addEventListener('scroll' , () => {
                const currentScroll = window.pageYOffset

                if (currentScroll <= 0) {
                    body.classList.remove("scroll-up")
                }

                if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
                    body.classList.remove("scroll-up")
                    body.classList.add("scroll-down")
                }

                if (currentScroll < lastScroll && body.classList.contains("scroll-down")){
                    body.classList.remove("sroll-down")
                    body.classList.add("sroll-up")
                }

            
                lastScroll = currentScroll;

            })
    </script>

    <script>
        
        const menuToggle = document.querySelector('.toggle')
        const menu = document.querySelector('.menu')
        const menu2 = document.querySelector('.menu2')
        const logo = document.querySelector('.logo')
        
        menuToggle.addEventListener('click', () => {
        
            menuToggle.classList.toggle('active')
            menu.classList.toggle('active')
            menu2.classList.toggle('active')
            logo.classList.toggle('active')
    
        })

    </script>