Navbar not changing background colour when scrolling

Question

Tried a few different JavaScript options and I am hoping it is something really simple that I am missing.

Several attempts and Google searches as to how exactly I do this seems to lead me on a road to nowhere for every different solution so far.

Any suggestions as to how to fix this would be apppreciated.

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementsByClassName(".navbar").style.backgroundColor = "transparent";
  } else {
    document.getElementsByClassName(".navbar").style.backgroundColor = "black";
  }
}

ul {
  padding: 0;
  margin: 0;
}

ul li {
  list-style-type: none;
}

.hero-img {
  filter: brightness(30%);
  background-size: cover;
}

.hero-image-overlay {
  width: 50%;
  margin: 0 auto;
  padding: 1rem 0;
}

.navbar {
  padding: 0;
  background-color: transparent;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar ul {
  display: flex;
  position: relative;
}

.navbar ul li {
  padding: .5rem 0;
  color: white;
  padding: 1rem;
  width: 100%;
}

ul a {
  display: inline-block;
}

.nav-img {
  width: 175px;
}

.header-li:hover,
.header-li:focus {
  color: orangered;
  transition: all .3s;
}

.header-li {
  display: none;
}

.news-posts {
  max-width: 1250px;
  columns: 500px 2;
  margin: 0 auto;
}

<html>

<body>
  <!--  start of Header area  -->
  <header>
    <div class="hero-image">
      <img class="hero-img" src="img/lower-height-team-photo.jpg" alt="team-photo">
    </div>
    <nav class="navbar">
      <ul class="header-ul">
        <a href="#">
          <li class="img-li"><img src="img/imageedit_3_3953793469.png" alt="" class="nav-img"></li>
        </a>
        <a href="#">
          <li class="header-li">About Us</li>
        </a>
        <a href="#">
          <li class="header-li">Team</li>
        </a>
        <a href="#">
          <li class="header-li">Fixtures/Results</li>
        </a>
        <a href="#">
          <li class="header-li">News</li>
        </a>
        <a href="#">
          <li class="header-li">Contact</li>
        </a>
      </ul>
      <a href="#" class="hamburger-li"><i class="fa fa-bars fa-2x"></i></></a>
    </nav>
  </header>
</body>

</html>

Many thanks to any solutions you can offer.

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — CBroe, Nov 09 '21 at 10:26

Fredrick Abisai · Answer 1 · 2021-11-09T10:55:28.467

0

Firstly, remove . sign when getting element by class name, it should be

   document.getElementsByClassName("navbar")

and not

   document.getElementsByClassName(".navbar")

Also, take a note that getElementsByClassName returns an array so, in order to set a background color to work, it should be something like this:

document.getElementsByClassName(".navbar")[0].style.backgroundColor = "black";

This is complete javascript code

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementsByClassName("navbar")[0].style.backgroundColor = "transparent";
  } else {
    document.getElementsByClassName("navbar")[0].style.backgroundColor = "black";
  }
}
// Do not forget to call the function 
scrollFunction();

Also remove display: none in header-li class

edited Nov 09 '21 at 10:55

answered Nov 09 '21 at 10:30

Fredrick Abisai

1
2

Not related to the topic. You can use single backticks like \`display:none\`, instead of using three backticks for inline code in markdown. – the Hutt Nov 09 '21 at 11:00
Thanks for this - tried this and seems to now only show the black background and doesn't change to transparent again when I'm not over a certain amount of pixels. I've uploaded the page to GitHub if you can check out the code in full and see if there is anything I am missing still. https://github.com/robbray91/retford-basketball – Rob Bray Nov 09 '21 at 11:06
@RobBray will have a look at it and will give you feedback. – Fredrick Abisai Nov 10 '21 at 07:50

Navbar not changing background colour when scrolling

1 Answers1