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

Question

在下面的代码中，标题颜色是透明的。我想在向下滚动页面时将其颜色更改为“#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

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');
 }
 });
});