Skip to main content
se añadieron 26 caracteres en el cuerpo; etiquetas editadas
Origen Enlace
Rodrigo
  • 6.2k
  • 6
  • 16
  • 37

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

<nav class="navbar fixed-top navbar-expand-lg fuentes-personalizadas" id="navScroll">
    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);
.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);

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

    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);

HTML:

<nav class="navbar fixed-top navbar-expand-lg fuentes-personalizadas" id="navScroll">
.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);
se añadieron 1606 caracteres en el cuerpo
Origen Enlace
Emilio Hurtado
  • 109
  • 1
  • 1
  • 11

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:

    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);

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í

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:

    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);
Origen Enlace
Emilio Hurtado
  • 109
  • 1
  • 1
  • 11

¿Cómo hago para que mi navbar no se esconda al scrollear para abajo?

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í