Estoy haciendo un sitio web para un restaurante, pero tengo un problema con el navbar al scrollear para abajo. Le agregué un efecto que le cambia el color al srcollear hacia abajo. El problema es que el navbar se esconde y vuelve a aparecer completamente cuando scrolleo hacia arriba.
Adjunto imágenes.

[![introducir la descripción de la imagen aquí][1]][1]
[![introducir la descripción de la imagen aquí][2]][2]
[![introducir la descripción de la imagen aquí][3]][3]


  [1]: https://i.sstatic.net/Crtja.png
  [2]: https://i.sstatic.net/jacsi.png
  [3]: https://i.sstatic.net/f4cPu.png

Mi código hasta acá:

**HTML:**
`<nav class="navbar fixed-top navbar-expand-lg fuentes-personalizadas" id="navScroll">`

**CSS:** 
```.fuentes-personalizadas {
    background: rgba(19, 15, 15, 0) !important;
    color: white;
}

.fuentes-personalizadas li {
    font-weight: bold;
}

.fuentes-personalizadas a {
    color: white;
}

.fuentes-personalizadas a:hover {
    color: tomato
}

.fuentes-personalizadas-scroll {
    background: white !important;
    color: black;
}

.fuentes-personalizadas-scroll li {
    font-weight: bold;
}

.fuentes-personalizadas-scroll a {
    color: black;
}

.fuentes-personalizadas-scroll a:hover {
    color: red;
}```

**JS:**
function scrollEffect(pxPantalla) {
    window.addEventListener("scroll", () => {
        let scroll = document.documentElement.scrollTop;
        let bgChange = document.getElementById("navScroll");
        let marcoHamburg = document.getElementById("marcoHamburg");
        let iconoHamburg = document.getElementById("iconoHamburg");

        if (scroll > pxPantalla) {
            bgChange.className = "navbar fixed-top navbar-expand-lg fuentes-personalizadas-scroll";
            marcoHamburg.className = "navbar-toggler text-dark";
            iconoHamburg.className = "fas fa-bars text-dark";
        } else {
            bgChange.className = "navbar fixed-top navbar-expand-lg fuentes-personalizadas";
            marcoHamburg.className = "navbar-toggler text-light";
            iconoHamburg.className = "fas fa-bars text-light";
        }
    })
}

scrollEffect(20);