在scrollldown上更改项目背景颜色

Question

我想让用户向下滚动时更改背景颜色。 我试着用jQuery实现它而没有运气。

$(document).scroll(function() {
  if (window.scrollY > 50) {
    $(".header-wrap").stop().animate({
      zoom: 1
    });
  } else {
    $(".header-wrap").stop().animate({
      zoom: 2
    });
  }
});

.content-wrap {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 4000px;
}
.header-wrap {
  position: absolute;
  top: 150px;
  font-size: 17px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="content-wrap">Not affected</div>
<div class="header-wrap">hello
  <br/>hello
  <br/>hello
  <br/>
</div>

的 Fiddle

Answer 1

你可以使用

$(window).scrollTop()  

而不是

window.scrollY

this