导航栏在滚动时不改变背景颜色

Question

Tried a few different JavaScript options and I am hoping it is something really simple that I am missing.尝试了一些不同的 JavaScript 选项，我希望它是我遗漏的非常简单的东西。

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.非常感谢您提供的任何解决方案。

Answer 1

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:另外，请注意getElementsByClassName返回一个数组，因此，为了设置背景颜色起作用，它应该是这样的：

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

This is complete javascript code这是完整的javascript代码

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同时删除display: none in header-li 类

导航栏在滚动时不改变背景颜色

问题描述

1 个解决方案

解决方案1
0 2021-11-09 10:30:09

导航栏在滚动时不改变背景颜色

问题描述

1 个解决方案

解决方案1 0 2021-11-09 10:30:09

解决方案1
0 2021-11-09 10:30:09