​x
 
<!DOCTYPE html>
<html>
<style>
.test {
  background-color: yellow;
}
</style>
​
<body style="font-size:20px;height:1500px">
​
<h1>onscroll 事件</h1>
​
<p id="myP" style="position:fixed">
如果将该页面从顶部向下滚动 50 像素，则会将“test”类添加到该段落。
再次向上滚动可删除该类。
</p>
​
<script>
window.onscroll = function() {myFunction()};
​
function myFunction() {
  if (document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}
</script>
​
</body>
</html>
​