0

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í introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

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);
4
  • Qué has intentado hasta ahora?
    – Rodrigo
    Commented el 3 feb. 2021 a las 17:48
  • Hasta hora intenté solucionarlo agregándole margin top y padding top al navbar, pero se ve muy raro, ya que cuando scrolleo hacia arriba, la configuración se mantiene. Commented el 3 feb. 2021 a las 17:50
  • Excelente, edita tu pregunta y añade el código que tienes para que puedas recibir ayuda óptima
    – Rodrigo
    Commented el 3 feb. 2021 a las 17:51
  • @anythingg agregado el código a la pregunta. Gracias Commented el 3 feb. 2021 a las 17:57

1 respuesta 1

0

prepare este código, espero te ayude

el HTML es sencillo y solo tiene declarado los elementos y sus clases. En el CSS es donde se deja fijo el navBar en el tope y el contenido del sitio esta separado en 60px del tope para que no se encuentre con el navBar.

la clase alto solo fue para tener espacio para hacer scroll.

HTML

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>


<div class="contenido">
  <p class="alto">
    <label>texto de prueba</label><br>
    <label>texto de prueba</label><br>
    <label>texto de prueba</label><br>
    <label>texto de prueba</label><br>
  </p>
</div>

CSS

.navbar{
  position: fixed !important;
  top: 0;
  width: 100%;
}

.contenido{
  margin-top: 60px;
}

.alto{
  height: 600px;
}

te dejo el link para que lo veas funcionando https://jsfiddle.net/naglfar_jv/jkevoLm0/4/

1
  • Muchísimas gracias por tu ayuda José! Commented el 4 feb. 2021 a las 14:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.