Wie scroll top verwenden, um eine Animation in CSS auszulösen?

Question

Ich habe Probleme mit der Funktion scrolltop(), um eine Animation mit CSS auszulösen. Ich möchte den Text 'Scrollen Sie nach unten, um den Effekt zu ändern' zum Ausblenden und Anzeigen der beiden Tasten, wenn der Benutzer bis zu 70 Pixel nach unten scrollen. Aber diese Funktion scheint nicht zu funktionieren. Muss ich einen Offset verwenden, um eine Animation auszulösen? Bitte helfen Sie mir, ich möchte jQuery und Animation css kennenlernen.

Hier ist mein Code unten:

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

Sie müssen das Dokument $(document).scroll() binden. Im Moment verwenden Sie das Ereignis $(document).ready(), das nur erklärt, was geschehen soll, wenn das Dokument fertig ist. Um jedoch eine Reihe von Funktionen/Features für das Scrollen des Dokuments (Ereignis) zu deklarieren, müssen Sie das entsprechende jQuery-Ereignis verwenden, in diesem Fall scroll().

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

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