Style Tweaking in JS doesn't work as planned

Question

So, I am trying to make navbar swap colors of text and background when scrolled, with the following code it seems that background part is working just fine and it switches to white and back to gray, but when I literally changed font color in the next line, it just doesn't work. All the links are grouped in a list with the id = "nav_links". What's the deal with this? Thanks in advance!

function myFunction() {
  if (document.body.scrollTop >= 0) {
    console.log(document.body.scrollTop);
    nav.style.backgroundColor = "white";
    document.getElementById('nav_links').style.color = 'rgb(25,25,25)';
    if (document.body.scrollTop === 0) {
      nav.style.backgroundColor = 'rgb(25,25,25)';
      document.getElementById('nav_links').style.color = "white";
    }
  }
}
document.addEventListener("scroll", myFunction);

  <header id="nav">
    <img src="logo.png" alt="logo" id="logo">
    <nav>
        <ul id="nav_links">
          <li><a href="#">Lifestyle</a></li>
          <li><a href="#">Fashion</a></li>
          <li><a href="#">Beauty</a></li>
          <li><a href="#">Health</a></li>
        </ul>       
    </nav>

Neither is your problem description *"doesn't work"* any helpful, nor can we help you if you don't post an MCVE. http://stackoverflow.com/help/mcve — connexo, May 09 '21 at 18:51
Make sure you aren't getting any errors in the browser console. Also, "scroll" events are fired very frequently by browsers, and making style changes that frequently can cause the page to be sluggish. Usually it's a good idea to only handle one "scroll" event every 50 to 100 milliseconds. — Pointy, May 09 '21 at 18:54
links ( tags) have default colors defined by the browsers, you need to target them to change their colors — Zion Ay, May 09 '21 at 19:21
sounds like it would do the job, i'm just not sure how, do you know any source which could help me, thanks in advance! — yashichy, May 09 '21 at 19:26
Do you want the bullet points on the list to show or do you want them removed? Also does the nav element in your script refer to the element with id nav or to the nav element itself? — A Haworth, May 10 '21 at 06:53

score 0 · Answer 1 · answered May 10 '21 at 09:35

Anchor elements tend to have special treatment when it comes to their default styling by the browser. So we need to be quite specific when selecting them for a color change.

This snippet changes what the JS does. Instead of setting the styles directly it sets nav to have/not have a class 'scrolled' depending on whether scrollTop/pageYoffset is greater than zero or not. (Because scrollTop can't go below zero there is no need for the extra test in the script).

The presence/absence of the scrolled class causes both the background color of #nav and the color of the anchor elements in the li elements to be set in different ways.

A couple of notes on this. It has been assumed that the element with the id of nav is the one in your script which has id nav. This may not matter in practice, but if this is not true and element nav is in fact the actual nav element then you could replace #nav by #nav nav for more specificity. It's also been assumed that you don't want the bullet point suddenly appearing on the list as the background turns to white but I've indicated in the snippet how you can go back to having that if that was intended.

const nav = document.querySelector('#nav');

function myFunction() {
  // if (document.body.scrollTop > 0) { //if there is some scrolling
  // I ran into some problems making a Stackoverflow snippet because of the introduction of !doctype html
  // so I have used this cross-browser test from @ijavid answer at https://stackoverflow.com/questions/2717252/document-body-scrolltop-is-always-0-in-ie-even-when-scrolling
  if (typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0) {
    nav.classList.add('scrolled');
  } else { // there isn't any scrolling
    nav.classList.remove('scrolled');
  }
}
document.addEventListener("scroll", myFunction);

body {
  height: 200vh;
  background-color: blue;
}

#nav {
  background-color: rgb(25, 25, 25);
}

#nav.scrolled {
  background-color: white;
}

#nav #nav_links li>a {
  color: white;
}

#nav.scrolled #nav_links li>a {
  color: rgb(25, 25, 25);
}


/* if you want the bullet points to show when the background goes white remove the next two settings */

#nav_links>li {
  list-style: none;
}


/* this is put in because of a bug in Safari which would mar the accessibility of the list */


/* (Safari would ignore it) see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */

#nav_links>li::before {
  content: "\200B";
}

</style></head><body><!doctype html><html><head><style>body {
  height: 200vh;
  background-color: blue;
}

#nav {
  background-color: rgb(25, 25, 25);
}

#nav.scrolled {
  background-color: white;
}

#nav #nav_links li>a {
  color: white;
}

#nav.scrolled #nav_links li>a {
  color: rgb(25, 25, 25);
}


/* if you want the bullet points to show when the background goes white remove the next two settings */

#nav_links>li {
  list-style: none;
}


/* this is put in because of a bug in Safari which would mar the accessibility of the list */


/* (Safari would ignore it) see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */

#nav_links>li::before {
  content: "\200B";
}

<header id="nav">
  <img src="logo.png" alt="logo" id="logo">
  <nav>
    <ul id="nav_links">
      <li><a href="#">Lifestyle</a></li>
      <li><a href="#">Fashion</a></li>
      <li><a href="#">Beauty</a></li>
      <li><a href="#">Health</a></li>
    </ul>
  </nav>
</header>

Style Tweaking in JS doesn't work as planned

1 Answers1