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