Why is background color not changing for navbar on scrolling?

Question

I want navbar to be transparent for during the image animation and have a black background when you scroll to text. The if condition doesn't seem to work.

HTML:

<nav id="navbar">
        <a href="#" class="logo">Logo</a>
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

CSS:

nav{
    overflow-x: hidden;
    position: fixed;
    width: 100%;
    padding: 10px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}
.newNav{
    background: black;
}

JS:

let nav = document.getElementById("navbar"); 
window.addEventListener('scroll',function(){
            let value = window.scrollY;
if(value>100){
                nav.classList.add("newNav");
            }
            else{
                nav.classList.remove("newNav");
            }
}

Please help.

Answer 1

HTML:

<nav id="navbar">
    <a href="#" class="logo">Logo</a>
    <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS:

  nav {
    overflow-x: hidden;
    position: fixed;
    width: 100%;
    padding: 10px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: 0.5s;
    }

JS:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    document.getElementById("navbar").style.background = "black";
  } else {
    document.getElementById("navbar").style.background = "";
  }
}