Scroll function on nav isnt working

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>brewingtempest</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <nav class="navbar" id="navbar">
        <h2 id="navtitle">brewingtempest</h2>
<ol>
<li class="navlinks">COLLECTIONS</li>
<li class="navlinks">EDITORIAL</li>
<li class="navlinks"><a href="#home">ABOUT</a></li>
</ol>

    </nav>
    <div class="home" id="home">
<img src='IMG_7336.png' id="home-img"/>
<div class="hometext">
    <h1  id="homeh1">BrewingTempest</h1>
<p  id="homep">From cozy sweaters to the cutest wrap dresses, the collection has all of your chic and feminine favorites.fff</p>
</div>
<div id="home-butonwrap">
    <div id="homepage1" class="home-button" onclick="homebtn1()"></div>
    <div id="homepage2" class="home-button" onclick="homebtn2()"></div>
    <div id="homepage3" class="home-button" onclick="homebtn3()"></div>
</div>
</div>

       <div id="collections">
 <h2 id="collection-h2">COLLECTIONS</h2>
       <div class="icon-border">aa</div>
       <div class="icon-border">aa</div>
       <div class="icon-border">aa</div>
       <div class="icon-border">aa</div>

       </div>
    <script src="script.js"></script>
</body>
</html>
window.addEventListener('scroll', function() {
    let navbar = document.getElementById('navbar');
    let scrollPosition = window.scrollY;

    if (scrollPosition > 0) {
        navbar.classList.add('with-border');
    } else {
        navbar.classList.remove('with-border');
    }
});


const homebtn1 = () => {
    const homebutton1 = document.getElementById('homepage1');
    const homebutton2 = document.getElementById('homepage2');
    const homebutton3 = document.getElementById('homepage3');
    const homeimg = document.getElementById('home-img');
    const homeh1 = document.getElementById('homeh1');
    const homep = document.getElementById('homep');
     homeh1.textContent = "BrewingTempest";
     homep.textContent = 'From cozy sweaters to the cutest wrap dresses, the collection has all of your chic and feminine favorites.fff';
     homeimg.src="IMG_7336.png";
     homebutton1.style.backgroundColor = 'black';
     homebutton2.style.backgroundColor = 'transparent';
     homebutton3.style.backgroundColor = 'transparent';

    }
    const homebtn2 = () => {
        const homebutton1 = document.getElementById('homepage1');
        const homebutton2 = document.getElementById('homepage2');
        const homebutton3 = document.getElementById('homepage3');
        const homeimg = document.getElementById('home-img');
        const homeh1 = document.getElementById('homeh1');
        const homep = document.getElementById('homep');
         homeh1.textContent = "Little  Co. Email is Here!";
         homep.textContent = 'From first looks at new collections to reminders about our sales,sign up now to stay in-the-know on all things Lttle Co.';
         homeimg.src="1280_lauren-1.webp";
         homebutton1.style.backgroundColor = 'transparent';
         homebutton2.style.backgroundColor = 'black';
         homebutton3.style.backgroundColor = 'transparent';
    
        }
        const homebtn3 = () => {
            const homebutton1 = document.getElementById('homepage1');
            const homebutton2 = document.getElementById('homepage2');
            const homebutton3 = document.getElementById('homepage3');
            const homeimg = document.getElementById('home-img');
            const homeh1 = document.getElementById('homeh1');
            const homep = document.getElementById('homep');
             homeh1.textContent = "Shop Little Co. by Lauren Conrad";
             homep.textContent = 'Shop the sweetest styles for baby, toddler, and big kids from Little Co. by Lauren Conrad';
             homeimg.src="Homepage_1280.webp";
             homebutton1.style.backgroundColor = 'transparent';
             homebutton2.style.backgroundColor = 'transparent';
             homebutton3.style.backgroundColor = 'black';
        
            }
body{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 ;
}
html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    overflow-wrap: break-word;
}
nav{
    display: flex;
    flex-direction: row;
    position: fixed;
    background-color: transparent;
    border-bottom: 1px solid black;
    align-items: flex-end;
    width: 100vw;
    z-index: 100;
    justify-content: space-between;
    align-items: center;
}
nav.with-border {
    border-bottom: transparent; 
}
#navtitle {
    margin-left: 90px;
}
nav > ol{
    display: flex;
     flex-direction: row; 
    list-style: none;
}
 li{
    justify-content: space-between;
    margin-right: 50px;
 }

.home{
    display:flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    background-color: burlywood;
    width: 100%;
    height: 100%; 
    align-items: center;
} 

#home-img {
    margin: 0;
    padding: 0;
    width: 50%;
    height: 100%;
    float: left;
}
.hometext{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100%;
    height: fit-content;
    text-align: center;
    
}
#home-butonwrap{
    display: flex;
    flex-direction: row;
    position: relative;
    top: 48%;
    right: 45%;
}
a{
    text-decoration: none;
    color:black
}
.home-button{
    display: inline-flex;
    flex-direction: column;
     border: 1px solid black;
     border-radius: 100%;
     aspect-ratio: 1/1;
     height: 20px;
     width:20px;
     margin-right: 10px;
}
#homepage1{
    background-color: black;
}
#homepage2{
    background-color: transparent;
}
#homepage3{
    background-color: transparent;
}
@media (max-width: 600px) {
    nav > ol {
        flex-direction: column;
    }
}
@media screen and (max-width: 450px) {
    .home {
     flex-direction: column;
    }
    #home-img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        
  }
  .home-button{
    display: inline-flex;
    flex-direction: row ;
     aspect-ratio: 1 / 1; 
     height: 20px;
     width:20px;
    
}
#home-butonwrap{
    display: flex;
    flex-direction: row;
    position: static;
    margin-bottom: 5px;
}
}
#collections{
    display: block;
    text-align: center;
    background-color: aqua;
    height: fit-content;
   }
   .icon-border{
    display: inline-block;
    margin-left: 30px;
    border: 1px solid black;
    width: 150px;
    aspect-ratio: 1/1;
    height: 150px;
    border-radius: 100%;
   }

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

so in the js file i have windo.addeventlistener which makes the nav bottom border none when scrllong down. te issue it was working before n now its not but my other functions are working i dont know the problem

where is the class in the css?

nav.with-border {
    border-bottom: transparent; 
}

not sure if this is what u mean

oh, good, it’s there, I wasn’t seeing it. maybe border-bottom is the shorthand, it expects three values, you want border-bottom-color?

ya tried border bottom none and 1ox solid transparent and tried border bottom color none and transparent still wont work

the thing is thine nav.with-border border bottom worked
this is the og commit which whe i added the function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>brewingtempest</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <nav class="navbar">
    <nav class="navbar" id="navbar">
        <h2 id="navtitle">brewingtempest</h2>
<ol>
<li class="navlinks">COLLECTIONS</li>

@@ -24,11 +24,11 @@
    </div>
</div>
       <div id="collections">
 <h2>COLLECTIONS</h2>
 <h2 id="collection-h2">COLLECTIONS</h2>


       </div>
    <script src="script.js"></script>
</body>
</html>

window.addEventListener('scroll', function() {
    let navbar = document.getElementById('navbar');
    let scrollPosition = window.scrollY;

    if (scrollPosition > 0) {
        navbar.classList.add('with-border');
    } else {
        navbar.classList.remove('with-border');
    }
});
   body{
    margin: 0;
    padding: 0 ;
}
nav{
    display: flex;
    flex-direction: row;
    position: fixed;
    background-color: transparent;
    border-bottom: 1px solid black;
    align-items: flex-end;
    width: 100vw;
    z-index: 100;
}
nav.with-border {
    border-bottom: none; 
}
#navtitle {
    margin-left: 90px;
}
ol{
 display: flex;   
 flex-direction: row; 
 justify-content: flex-end;
 
 margin-left: 40%;
}
li{
    display: flex;   
 flex-direction: row; 
 justify-content: flex-end;
  margin-left: 100px;
   
}
.home{
    margin: 0;
    padding: 0;
    background-color: burlywood;
    width: 100%;
    height: 100vh;
    display: flex; 
    align-items: center; 
} 

#home-img {
    margin: 0;
    padding: 0;
    width: 50%;
    height: 100vh;
    float: left;
}
.hometext{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    text-align: center;
    justify-content: center;
}
#collections{
 display: flex;
 flex-direction: column;
}
a{
    text-decoration: none;
    color:black
}



Your code works for me…sort of, until I add content and it creates an overflow on the wrong element. You do have content on the page, right?

The "scroll" event isn’t just a mouse wheel event, the page has to scroll (using an overflow on the correct element).

My guess is you have an inner overflow that looks like a page overflow (html/body) but is in fact on a child (most likely the .home element).

Does it work if you remove the height: 100% from the html/body selector?


Edit: BTW, the Firefox dev tools Inspector has a handy overflow badge that it adds to elements that are overflowing.

thank you so much stuck on this bug n it was the height on html/body