0

I currently have a sticky navigation bar on my page. After the user scrolls down the page (Specifically at the 100vh mark), I would like the background color of the navigation bar to change. My current code changes the color after x units, however, I want it to change after the full height of the page has been scrolled (Which is, of course, different for each load).

To clarify things for those that are suggesting other questions as an answer. I want to change the color after 100vh NOT after a pre-set number of pixels. Also, I want to do this without jQuery.

window.onscroll = function(ev) {
    if (window.scrollY > 500) {
         document.getElementById("navbar").style.backgroundColor = "orange"; 
    }
    else{
        document.getElementById("navbar").style.backgroundColor = "red"; 
    }
};
#navbar{
  text-align: center;
  margin: auto auto;
  position: -webkit-sticky;
  position: fixed; 
  top: 0px;
  width: 100%;
}
  <nav id="navbar">
      Navbar
  </nav>
  
  
  
 <div>
  ibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rvibiowibviw vioew bvienvoe vbeib ioebneeot<br>b iebvrnievobe uebirovneiorbveiorv ervobeibvrie bri vebviebirv ier ivbie <Br> oievberoiv eiorv eivbe rverveubvourwuo vuow ouer<br> ui eior wv urvw ivrwi vuw rv
</div>
Also, I would like this done without using JS libraries (so plain VanillaJS).

Thanks in advance

Greenreader9
  • 371
  • 2
  • 11
  • To clarify things for those that are suggesting other questions as an answer. I want to change the color after 100vh NOT after a pre-set number of pixels. Also, I want to do this without jQuery. – Greenreader9 Mar 25 '22 at 23:45

0 Answers0