change navbar content color on scroll

Question

I want to change the color of links when I scroll. I have the code for making the navbar sticky and adding background color already but I also need to change the links color on scroll. I've looked some other topics but couldn't find the solution.

Here's the code:

 const navbar = document.querySelector(".navbar"); window.onscroll = ()=> { this.scrollY > 20? navbar.classList.add("sticky"): navbar.classList.remove("sticky"); }

 .navbarcontent { max-width: 1250; height: 70px; margin: auto; padding: 0px 30px; }.navbar { position: fixed; z-index: 5; width: 100%; padding: 25px 0; transition: all 0.3s ease; /* background: #1b1b1b; */ }.navbar.sticky { padding: 10px 0; background: black; box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4); content: ""; /* background-color: rgba(10, 10, 10, 0.9); */ }.navbar.sticky::after { content: ""; opacity: 0.5; }.navbar.navbarcontent { display: flex; align-items: center; justify-content: space-between; }.navbar.menu-list { display: inline-flex; }.navbar.logo a { color: #fff; }.menu-list li { list-style: none; font-size: 18px; font-weight: 500; margin-left: 25px; text-decoration: none; transform: all 0.3s ease; }.menu-list li a { color: black; font-size: 18px; font-weight: 500; margin-left: 25px; text-decoration: none; }

 <nav class="navbar"> <div class="navbarcontent"> <div class="logo"><a href="#">Logo</a></div> <.-- <div class="icon cancel-btn"> <img src="/img/times-solid.svg" alt=""> </div> --> <ul class="menu-list"> <li><a href="#hero">Home</a></li> <li><a href="#text-slider">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contactform">Contact</a></li> <li><a href="#">Deutsch</a></li> </ul> <!-- <div class="icon menu-btn"> <img src="/img/bars-solid.svg" alt=""> </div> --> </div> </nav>

I tried creating a new const as navbar2 and proceeding with the same logic used in the original navbar const, I created a class in css called .menu-list.navColor li a and instead of black color I changed it to white but it didn't work. Thank you for your time!

Answer 1

You have a more specific CSS selector .menu-list li a that is setting the color. To overwrite this you need a selector that is as specific and later in the document, or more specific.

Since you are adding the sticky class, you could use: .sticky.menu-list li a

 const navbar = document.querySelector(".navbar"); window.onscroll = ()=> { this.scrollY > 20? navbar.classList.add("sticky"): navbar.classList.remove("sticky"); }

 .navbarcontent { max-width: 1250; height: 70px; margin: auto; padding: 0px 30px; }.navbar { position: fixed; z-index: 5; width: 100%; padding: 25px 0; transition: all 0.3s ease; /* background: #1b1b1b; */ }.navbar.sticky { padding: 10px 0; background: black; box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4); content: ""; /* background-color: rgba(10, 10, 10, 0.9); */ color: #fff; }.navbar.sticky::after { content: ""; opacity: 0.5; }.navbar.navbarcontent { display: flex; align-items: center; justify-content: space-between; }.navbar.menu-list { display: inline-flex; }.navbar.logo a { color: #fff; }.menu-list li { list-style: none; font-size: 18px; font-weight: 500; margin-left: 25px; text-decoration: none; transform: all 0.3s ease; }.menu-list li a { color: black; font-size: 18px; font-weight: 500; margin-left: 25px; text-decoration: none; }.sticky.menu-list li a { color: #FFF; }

 <nav class="navbar"> <div class="navbarcontent"> <div class="logo"><a href="#">Logo</a></div> <.-- <div class="icon cancel-btn"> <img src="/img/times-solid.svg" alt=""> </div> --> <ul class="menu-list"> <li><a href="#hero">Home</a></li> <li><a href="#text-slider">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contactform">Contact</a></li> <li><a href="#">Deutsch</a></li> </ul> <!-- <div class="icon menu-btn"> <img src="/img/bars-solid.svg" alt=""> </div> --> </div> </nav> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Answer 2

Good Luck.

 window.onscroll = function() { // console.log('scrolling'); var navbar2 = document.getElementById("nav1"); navbar1 = document.querySelector(".navbar"); if (this.scrollY > 20) { navbar2.classList.add("sticky"); } else { navbar2.classList.remove("sticky"); } };

 .navbarcontent { max-width: 1250; height: 70px; margin: auto; padding: 0px 30px; }.navbar { position: fixed; z-index: 5; width: 100%; padding: 25px 0; transition: all 0.3s ease; /* background: #1b1b1b; */ }.navbar.sticky { padding: 10px 0; background: black; box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4); content: ""; /* background-color: rgba(10, 10, 10, 0.9); */ }.navbar.sticky::after { content: ""; opacity: 0.5; }.navbar.navbarcontent { display: flex; align-items: center; justify-content: space-between; }.navbar.menu-list { display: inline-flex; }.navbar.logo a { color: #fff; }.menu-list li { list-style: none; font-size: 18px; font-weight: 500; margin-left: 25px; text-decoration: none; transform: all 0.3s ease; }.menu-list li a { color: black; font-size: 18px; font-weight: 500; margin-left: 25px; text-decoration: none; }.navbar.sticky li a { color: white; }

 <nav id="nav1" class="navbar "> <div class="navbarcontent"> <div class="logo"><a href="#">Logo</a></div> <.-- <div class="icon cancel-btn"> <img src="/img/times-solid.svg" alt=""> </div> --> <ul class="menu-list"> <li><a href="#hero">Home</a></li> <li><a href="#text-slider">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contactform">Contact</a></li> <li><a href="#">Deutsch</a></li> </ul> <!-- <div class="icon menu-btn"> <img src="/img/bars-solid.svg" alt=""> </div> --> </div> </nav> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />