title: Scroll prompt to appear only once on a page and max 3 times across the site
body: <p>I have a scroll prompt that I show after 2s of page load for 5s using CSS+jQuery on every page:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      $('.icon-scroll').delay(2000).fadeIn('slow', function(){    
        $('.icon-scroll').delay(5000).fadeOut('slow');
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {margin:0;}
  div {height:100vh;}
  
  .icon-scroll {display: none; position: absolute; top: calc(50%); right: 30px; width: 30px; height: 45px; margin-left: -20px; bottom: 7%; margin-top: -35px; box-shadow: inset 0 0 0 3px; border-radius: 25px; z-index: 2;}
  
  .icon-scroll:before {position: absolute; left: 50%; content: ''; width: 8px; height: 8px; background-color: inherit; box-shadow: inset 0 0 0 5px; margin-left: -4px; top: 7px; border-radius: 4px; -webkit-animation-duration: .800s; animation-duration: .800s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: scroll; animation-name: scroll;} @-webkit-keyframes scroll {0% {opacity: 1;} 100% {opacity: 0; transform: translateY(25px);}} @keyframes scroll {0% {opacity: 1;} 100% {opacity: 0; transform: translateY(25px);}}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
  
    &lt;span class="icon-scroll"&gt;&lt;/span&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The basic purpose of this is to make people scroll a page where a fullscreen image/design is used. But, I do not want this prompt to reappear on a page every time it is refreshed (page refreshes on resize) or revisit - basically once on a page, and max 3 times across the site in a visit for every user.</p>
  <p>I think this can't be done through CSS so any help in this regard is much appreciated.</p>