Wordpress navigation menu reacting to scroll event

I'm a Wordpress beginner and have started by converting a typical static site to a custom Wordpress theme. The static site has a navigation bar that reacts to the user scrolling down the page (background image is blurred, resized and becomes the backdrop of the navigation bar).

My implementation does not appear to work with Wordpress and I'm wondering if I'm missing anything.

Static website's Javascript:

window.addEventListener('scroll', function () 
{
    document.body.classList
    [
        window.scrollY <= 580 ? 'add': 'remove'
    ]
('notscrolled');});

window.addEventListener('scroll', function () 
{
    document.body.classList
    [
            window.scrollY >= 580 ? 'add': 'remove'
    ]
('scrolled');});

Static website's CSS:

body.notscrolled #background-image /* When the background-image is not scrolled */
{
    -webkit-filter: blur(0px) brightness (100%);
    filter: blur(0px) brightness(100%);
    transition: 0.2s -webkit-filter linear;
}

body.scrolled #background-image /* When the background-image is scrolled */
{
    z-index:998;
    height: 0px; 
    -webkit-filter: blur(15px) brightness (50%);
    filter: blur(15px) brightness(75%);
    transition: 0.2s -webkit-filter linear;
}

body.notscrolled #header /* when the header is not scrolled */
{
    opacity: 0;
    transition: 0.2s -webkit-filter linear;
}

body.scrolled #header /* When the header is scrolled */
{
    opacity: 1;
    transition: 0.2s -webkit-filter linear;
}