CODEWITHSUNDEEP
javascripthtmlcss
Jay Dee
Jay Dee

Reputation: 127

change navbar content color on scroll

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!

Upvotes: 1

Views: 2328

Answers (2)

John Doe
John Doe

Reputation: 1424

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 />

Upvotes: 0

DBS
DBS

Reputation: 9994

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 />

Upvotes: 2

Related Questions