如何将标题的背景颜色从透明更改为白色？

Question

在下面的代码中，header颜色是透明的。我想在向下滚动页面时将其颜色更改为“#FFF”。请指导我如何为它编写相关的js代码。

还有，可以用普通的css吗？

div {
  height: 1000px;
  width: 100%;
}
#home {
  background-color: red;
}
header {
  background-color: transparent;
  color: ffffff;
  height: 100px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}

<header>Top Navigation</header>
<div id="home" class="sect"></div>

Answer 1

你试过 background-color:rgba(0,0,0,0); 了吗？

Answer 2

Pen 试试这个。它应该对你有帮助。您应该使用 jquery 或普通的 javascript

$(document).ready(function() {

$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the 
//nav bar to stick.  
console.log($(window).scrollTop())
if ($(window).scrollTop() > 10) {
$('header').css('background-color','#FFF');
 }
 if ($(window).scrollTop() < 10) {
 $('header').css('background-color','transparent');
 }
 });
});

如何将标题的背景颜色从透明更改为白色？

How to change the background color of the heading from transparent to paint white?

javascript

css

scroll

header

background-color