navbar scroll change color doesn't work shrinks when descending

0
votes

I'm trying to do so that when I go down the navbar changes color and when I go back up to the carousel it resumes its color

HTML

    <nav class="navbar navbar-expand-lg fixed-top navbar-scroll navbar-custom" id="navbar">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                <ul class="navbar-nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading1">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading2">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading3">Compétences</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading4">Portfolio</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading6">À Propos</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading7">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

JS

 window.onscroll = () => {
    const nav = document.querySelector('#navbar');
    if(this.scrollY <= 10) nav.className = ''; else nav.className = 'scroll';
  };

CSS


 .navbar-custom {
  background-color: rgba(255, 255, 255, 0.37);
}

.navbar-nav .nav-item .nav-link {

  color: white;

}

nav.scroll {
  background-color: #A1572F;
  color: #eef;
}

The problem is that when I go down the navbar does not change colors but it shrinks and just becomes white, I would like that when I go down its color is green for example and when I go up it is its color OK, how can I solve this problem?

javascripthtmlcsstwitter-bootstrap