title: Remember Class Names on Refresh of Page
body: <p>I've tried a few different ways to do this and can't get it right.</p>
  
  <p>The script on scroll adds a class of '.prod__viewed' whenever a div enters the viewport, so what I would like to is have the browser remember which divs have '.prod__viewed' on reload of the page, I have tried session storage but it's not quite there.</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>$(window).on('resize load scroll', function() {
    $('.prod__item').each(function() {
      if ($(this).prodInViewport()) {
        $(this).addClass('prod__viewed');
      }
    });
  
    var numItems = $('.prod__item').length;
    var totalNumItems = $('.prod__viewed').length;
    var prodCountCheck = $('.prod__count__container');
    var positionY = $(this).scrollTop();
    var pageHeight = $(this).height();
    var scrollHeight = $('.prod__wrapper').height();
    var scrollPercent = (positionY / (scrollHeight - pageHeight)) * 100;
    var prodCountElement = $('.prod__count__container').outerHeight();
  
    if (prodCountCheck.length == 1) {
      $('.prod__count__content')
        .html('&lt;span&gt;You&amp;#39;ve seen &lt;strong&gt;' + totalNumItems + '&lt;/strong&gt; of &lt;strong&gt;' + numItems + '&lt;/strong&gt; prods&lt;/span&gt;');
  
      $('.prod__load__bar').css({
        'top': prodCountElement,
        'width': scrollPercent + "%"
      });
    }
  });
  
  $.fn.prodInViewport = function() {
   var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom &gt; viewportTop &amp;&amp; elementTop &lt; viewportBottom;
  };
  
  sessionStorage.setItem("prodViewed", 
  $(".prod__item").addClass("prod__viewed"));
  
  
  if (sessionStorage.getItem("prodViewed")) {
      $(".prod__item").addClass(sessionStorage.getItem("prodViewed"));
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    box-sizing: border-box;
    font-size: 62.5%;
    -webkit-overflow-scrolling: touch;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  body {
    background: #fff;
    color: #333;
    font-family: "Montserrat", sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    margin: 0;
  }
  
  a {
    color: #333;
    text-decoration: none
  }
  
  .header__content {
    font-size: 18px;
    line-height: 1.8;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    width: 100%;
  }
  
  .prod__wrapper {
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    max-width: 500px;
    width: 100%;
  }
  
  .prod__container {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-top: -60px;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .prod__item {
    flex-basis: 50%;
    max-width: 50%;
    padding-left: 20px;
    padding-top: 60px;
  }
  
  .prod__item--img {
    height: 0;
    padding-bottom: 100%;
    position: relative;
  }
  
  .prod__item--img img {
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
  }
  
  .prod__name {
    font-weight: 700;
    line-height: 1.2;
    margin-top: 10px;
  }
  
  .prod__price {
    margin-top: 10px;
  }
  
  .prod__count__wrapper {
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    max-width: 500px;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  .prod__count__container {
    align-items: center;
    background: darkblue;
    color: white;
    display: flex;
    font-size: 20px;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  
  .prod__count__content {
    position: relative;
    top: -1px;
  }
  
  .prod__load__bar {
    background: dodgerblue;
    height: 6px;
    left: 0;
    max-width: 100%;
    position: absolute;
    top: 0;
  }
  
  .random__content {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    max-width: 500px;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section class="prod__wrapper"&gt;
    &lt;div class="prod__container"&gt;
      &lt;div class="prod__item"&gt;
        &lt;div class="prod__item--img"&gt;
          &lt;img src="https://images-na.ssl-images-amazon.com/images/I/81Lz-p7eRDL._SL1500_.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="prod__item--deets"&gt;
          &lt;div class="prod__name"&gt;
            My Hero Academia Two Heroes Blu Ray
          &lt;/div&gt;
          &lt;div class="prod__price"&gt;
            £14.99
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="prod__item"&gt;
        &lt;div class="prod__item--img"&gt;
          &lt;img src="https://images-na.ssl-images-amazon.com/images/I/81Lz-p7eRDL._SL1500_.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="prod__item--deets"&gt;
          &lt;div class="prod__name"&gt;
            My Hero Academia Two Heroes Blu Ray
          &lt;/div&gt;
          &lt;div class="prod__price"&gt;
            £14.99
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="prod__item"&gt;
        &lt;div class="prod__item--img"&gt;
          &lt;img src="https://images-na.ssl-images-amazon.com/images/I/81Lz-p7eRDL._SL1500_.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="prod__item--deets"&gt;
          &lt;div class="prod__name"&gt;
            My Hero Academia Two Heroes Blu Ray
          &lt;/div&gt;
          &lt;div class="prod__price"&gt;
            £14.99
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a working CodePen here: <a href="https://codepen.io/nickelse/pen/vYYoVZR" rel="nofollow noreferrer">https://codepen.io/nickelse/pen/vYYoVZR</a></p>