En primer lugar, el código original es muy amplio, luego emplearé una simplificación del mismo para explicar el problema.
Dado el siguiente documento index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Macondo&display=swap');
@keyframes h1InBig {
from {
margin-bottom: 7.5rem;
}
to {
margin-bottom: 0;
}
}
@keyframes h1InLittle {
from {
margin-bottom: 4.5rem;
}
to {
margin-bottom: 0;
}
}
/*****RESET*****/
* {
font-family: 'Dosis', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;
text-decoration: none;
text-transform: capitalize;
}
html {
background-color: rgb(119, 207, 119);
}
*>img {
user-select: none;
pointer-events: none;
}
/*****VARIABLES*****/
:root {
--peru: #ffb03b;
}
/*****HEADER*****/
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.header .topbar {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 1rem;
height: 3rem;
background-color: transparent;
color: rgba(255, 255, 255, 0.7);
}
.header .topbar i {
margin: 0 2rem;
color: var(--peru);
}
.header .topbar i span {
color: white;
padding-left: 0.5rem;
}
.header .navbar {
display: flex;
justify-content: space-around;
align-items: center;
background-color: transparent;
}
.header .navbar .fa-bars {
display: none;
}
.header .navbar .logo {
padding: 0.35rem;
font-size: 2.2rem;
font-weight: bold;
letter-spacing: 0.25rem;
}
.header .navbar .logo a,
.header .navbar .logo a:hover {
font-family: 'Macondo';
color: white;
}
.header .navbar .navlist {
width: 40%;
display: flex;
align-items: center;
justify-content: space-between;
}
.header .navbar .navlist a {
font-size: 1.1rem;
color: white;
font-weight: bold;
}
.header .navbar .navlist a:hover {
color: var(--peru);
}
.header .navbar .btn {
padding: 0.5rem 1rem;
font-weight: bold;
font-size: 1.5rem;
color: var(--peru);
border: 2px solid var(--peru);
border-radius: 1rem;
}
.header .navbar .btn:hover {
color: white;
background-color: var(--peru);
}
.header .navbar .navlist a.active {
color: var(--peru);
}
</style>
</head>
<body>
<!--header section starts-->
<section class="header" id="header">
<div class="topbar">
<i class="fas fa-phone"><span>+1 5589 55488 55</span></i>
<i class="fas fa-clock"><span>Mon-Sat: 11:00 AM - 23:00PM</span></i>
</div>
<div class="navbar">
<h1 class="logo"><a href="index.html">Restaurant0202</a></h1>
<div class="navlist">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#menu">Menu</a>
<a href="#specials">Specials</a>
<a href="#events">Events</a>
<a href="#chefs">Chefs</a>
<a href="#gallery">Gallery</a>
</div>
<a href="#book" class="btn">Book a table</a>
<i class="fas fa-bars" id="bars"></i>
</div>
</section>
<!--header section ends-->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum similique libero fugiat voluptas assumenda vero
qui impedit molestiae labore sapiente tempore non repellendus voluptatum officiis, reprehenderit deleniti sunt
repellat est tempora? Fugit dolore voluptas tenetur quam sit suscipit ullam aliquid consequuntur voluptates
saepe, fugiat optio nam voluptatem facilis in deleniti pariatur, laboriosam adipisci nesciunt vel expedita
aliquam laudantium fuga ea! Nisi, consectetur molestiae illo debitis error nostrum inventore delectus nulla,
excepturi itaque dolor amet in impedit aliquid fuga praesentium, et ducimus omnis. Culpa ullam quaerat, vitae
accusamus soluta perspiciatis ea impedit aspernatur illum inventore. Mollitia alias eos accusantium eum suscipit
nam quaerat, officiis ea magni nulla obcaecati, vel ex fuga natus ullam dolore doloremque quas sint commodi aut
voluptas? Eos in inventore saepe nesciunt corrupti repudiandae numquam expedita reiciendis tempora sint optio
omnis ea deleniti sed, atque laudantium placeat impedit itaque. Blanditiis hic distinctio maxime provident quis
modi vero quas?</p>
<script>
let topbar = document.querySelector('.topbar');
let navbar = document.querySelector('.navbar');
function scrollActive() {
if (window.scrollY > 20) {
topbar.style.display = "none";
navbar.style.backgroundColor = "rgba(0,0,0,0.4)";
navbar.style.padding = "0.3rem";
}
}
window.addEventListener('scroll', scrollActive());
</script>
</body>
</html>
El objetivo es lograr que el elemento .topbar desaparezca y el .navbar quede mejor remarcado cuando el usuario haya hecho scroll hacia abajo en la página 20px o más. Para ello, empleo el script que veis en el documento.
Para medir la distancia de scroll, empleo scrollY. Ahora bien, la función no se ejecuta. Pensé que tal vez era una incompatibilidad con scrollY (se recomienda el uso de pageYOffset desde MDN), así que decidí cambiar el símbolo lógico de "mayor que" a "menor que" y ejecutar. Si lo hacen, podrán observar que sí se aplica el estilo buscado, luego scrollY se lee correctamente. También desde consola se puede replicar este comportamiento.
Si todas las funciones y propiedades empleadas en el script son correctas, ¿qué estoy haciendo mal? Gracias.
addEventListener
tienes unos paréntesis de más. Debería serwindow.addEventListener('scroll', scrollActive);