title: How do I prevent data from reloading when I scroll up?
body: <p>I have a problem with data reloading and this is my question:
  I made an animation for each <code>&lt;article&gt;</code> shows a preloader. For example, you can see below that I set a condition to show me the next <code>&lt;article&gt;</code> if user scrolled from <code>620px to 640px</code>, and the main problem is that it loads again when I scroll up. What should I do? Can anyone help?</p>
  <pre><code>        var bodyTop = $('body').offset().top,
              bodyHeight = $('body').outerHeight(),
              windowHeight = $(window).height(),
              windowScrollTop = $(this).scrollTop(),
              desktopview = (windowHeight &gt;= 992),
              desktop = $(window).width() &gt;= 992 ,
  
          if (desktop &amp;&amp; windowScrollTop &gt; 620 &amp;&amp; windowScrollTop &lt; 640) {
              $('#dot-1').show();
              setTimeout(function(){
                  $('#dot-1').hide();
                  $('.scroll-1').removeClass(&quot;display-none&quot;);
              }, 3000);
          }else {}
          if (desktop &amp;&amp; windowScrollTop &gt; 1100 &amp;&amp; windowScrollTop &lt; 1110 ) {
              $('#dot-2').show();
              setTimeout(function(){
                  $('#dot-2').hide();
                  $('.scroll-2').removeClass(&quot;display-none&quot;);
              }, 3000);
          }else {}
          if (desktop &amp;&amp; windowScrollTop &gt; 1640 &amp;&amp; windowScrollTop &lt; 1680) {
              $('#dot-3').show();
              setTimeout(function(){
                  $('#dot-3').hide();
                  $('.scroll-3').removeClass(&quot;display-none&quot;);
              }, 3000);
          }else {}
          if (desktop &amp;&amp; windowScrollTop &gt; 2000 &amp;&amp; windowScrollTop &lt; 2040 ) {
              $('#dot-4').show();
              setTimeout(function(){
                  $('#dot-4').hide();
                  $('.scroll-4').removeClass(&quot;display-none&quot;);
              }, 3000);
          }else {}
          if (desktop &amp;&amp; windowScrollTop &gt; 2700 &amp;&amp; windowScrollTop &lt; 2740 ) {
              $('#dot-5').show();
              setTimeout(function(){
                  $('#dot-5').hide();
                  $('.scroll-5').removeClass(&quot;display-none&quot;);
              }, 3000);
          }else {}
          if (desktop &amp;&amp; windowScrollTop &gt; 3100 &amp;&amp; windowScrollTop &lt; 3140 ) {
              $('#dot-6').show();
              setTimeout(function(){
                  $('#dot-6').hide();
                  $('.scroll-6').removeClass(&quot;display-none&quot;);
              }, 3000);
          }else {}
  </code></pre>