How to use scroll top to trigger an animation in css?

Question

I'm having trouble using scrolltop() function to trigger an animation with css. I want the text 'Scroll down to change effect' to hide and show the two buttons when the user scroll down to 70 pixels down. But this function does not seem to work. Do I have to use an offset to trigger an animation? Please help, I want to familiarize jquery and animation css.

Here's my code below:

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

Crashtor · Accepted Answer · 2017-08-11T02:16:05.963

2

You need to bind the document to $(document).scroll(). Right now you're you're using $(document).ready() event, which only declares what should happen when the document is ready. But to declare a set of functions/features for when the document is scrolling(event), you must use the appropriate jQuery event, which in this case is scroll().

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

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

edited Aug 11 '17 at 02:16

answered Aug 11 '17 at 02:10

Crashtor

1,249
1
13
21

this is what I've been looking for, thank you. But I have a question sir, what if the user refreshes the page on the design vertical position which is 50pixels does the effect will still work? Cause I have tried it it will still show the text not the buttons, unless the user will scroll once and it will take effect – Aug 11 '17 at 02:22
No. The scrolling position is never saved by the browser by default. You can however do it using cookies or localstorage and what not, but that introduces a whole new level of "complexity". However, if you're interested, here's a link: https://stackoverflow.com/questions/29203312/how-can-i-retain-the-scroll-position-of-a-scrollable-area-when-pressing-back-but. Don't forget to mark my answer correct if it helped you. Thanks! – Crashtor Aug 11 '17 at 02:27

How to use scroll top to trigger an animation in css?

1 Answers1