First of all, the original code is very extensive, then I will use a simplification of it to explain the problem.
Given the following index.html document
<!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>
The goal is to make the .topbar element disappear and the .navbar to be better highlighted when the user has scrolled down the page 20px or more . To do this, I use the script that you see in the document.
To measure the scroll distance, I use scrollY . Now the function doesn't run . I thought maybe it was an incompatibility with scrollY (using pageYOffset is recommended from MDN), so I decided to change the logical symbol from "greater than" to "less than" and run. If you do, you'll notice that the desired style is applied, then scrollY is read correctly . This behavior can also be replicated from the console.
If all the functions and properties used in the script are correct, what am I doing wrong? Thanks.
Just as you do the check if it is 20 pixels down, you can do it the other way around: