導航欄在滾動時不改變背景顏色

Question

嘗試了一些不同的 JavaScript 選項，我希望它是我遺漏的非常簡單的東西。

到目前為止，關於我究竟如何做到這一點的幾次嘗試和谷歌搜索似乎使我走上了一條無路可走的道路。

任何有關如何解決此問題的建議將不勝感激。

 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>

非常感謝您提供的任何解決方案。

Answer 1

首先，刪除 . 按類名獲取元素時簽名，應該是

   document.getElementsByClassName("navbar")

並不是

   document.getElementsByClassName(".navbar")

另外，請注意getElementsByClassName返回一個數組，因此，為了設置背景顏色起作用，它應該是這樣的：

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

這是完整的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();

同時刪除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