如何使用滚动顶部在css中触发动画？

Question

我在使用scrolltop（）函数触发带css的动画时遇到问题。我想要文本＆＃39;向下滚动以更改效果＆＃39; 以隐藏并在用户向下滚动到70像素时显示两个按钮。但是这个功能似乎不起作用。我是否必须使用偏移来触发动画？请帮忙，我想熟悉jquery和动画css。

以下是我的代码：

＆＃13;

＆＃13;

    h1,h2,h3,h4,h5,h6 {margin: 0;}
    a {text-decoration: none;color: #2aabcc;}
    body {background: #f3f3f3;height: 1200px;}
    .container {width: 1000px;max-width: 100%;position: relative;margin: 0 auto;padding: 0;}
    .page_header {overflow: hidden;}
    .page_header h1 {text-align: center;position: relative;animation: pagetitle 1.5s;}
    .process {text-align: center;padding: 30px 10px;}
    .process a {color: #000;display: inline-block;line-height: 44px;border: 1px solid #000;margin: 0 auto;width: 150px;height: 44px;text-align: center;}
    .process a:hover {color: #b51e1e;border: 1px solid #b51e1e;}
    @keyframes pagetitle {
      0%{transform: translateY(-81%);opacity: 0;}
      50% {opacity: 0.5;}
      100% {transform: translateY(0%);opacity: 1;}
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="container">
<div class="page_header">
<h1>Welcome to Animation Scroll</h1>
</div>
<div class="process">
<h2>Scroll down to change effect</h2>
<a href="#">See our Process</a>
<a href="#">View more</a>
</div>
</div>
</header>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;