jquery - 如何使用 scroll top 在 css 中触发动画？

Question

我在使用 scrolltop() 函数通过 css 触发动画时遇到问题。当用户向下滚动到 70 像素时，我希望文本“向下滚动以更改效果” 隐藏和显示这两个按钮。但是这个功能好像不行。我必须使用偏移来触发动画吗？请帮助，我想熟悉 jquery 和动画 css。

下面是我的代码:

$(document).ready(function(){
      if ($(window).scrollTop() > 70)
      {
        $('.process h2').hide();
        $('.process a').show();

      }
      else {
          $('.process h2').show();
          $('.process a').hide();
      }
    });

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

<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>

Answer 1

您需要将文档绑定(bind)到$(document).scroll()。现在您正在使用 $(document).ready() 事件，它只声明当文档准备就绪时应该发生什么。但是要声明一个集合文档滚动时的功能/特性(事件)，您必须使用适当的 jQuery 事件，在本例中为 scroll()。

$(document).on("scroll", function () {
     if ($(document).scrollTop() > 70)
      {
        $('.process h2').hide();
        $('.process a').show();

      }
      else {
          $('.process h2').show();
          $('.process a').hide();
      }
});