title: How to change a div class after scrolling past, and then change it back to original when completing the same scrolling action for a second time?
body: <p>In my html I've got a <code>div</code> that changes its class when the user scrolls past it (and the <code>div</code> becomes out of view), such that when the user scrolls back up the page the class is changed.</p>
  
  <p>I would like to have that <code>div</code> class reverted to original the second time the user scrolls back up, but just can't figure out a way to do so. I'm trying to find a way for it to work in such a way that the effect repeats and the class alternates every time it comes back into view.</p>
  
  <p>I'm doing this with two scripts at the moment. The first one works and changes the class of the <code>div</code> when the user scrolls back up:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
    $(function() {
      var scroll1 = $(window).scrollTop();  // how many pixels have been scrolled
      var os1 = $('#div1').offset().top;  // pixels to top of div1
      var ht1 = $('#div1').height();  // height of div1 in pixels
      if (scroll &gt; os1 + ht1) {
        $('#div1').removeClass('english').addClass('japanese');
      }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>But the second one doesn't seem to do anything at all:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
    $(function() {
      var scroll2 = $(window).scrollTop();
      var os2 = $('#div1').offset().top;
      var ht2 = $('#div1').height();
      var class1 = document.getElementsByClassName('japanese')[0].className;
      if (scroll &gt; os1 + ht1 &amp;&amp; class1 == 'japanese') {
        $('#div1').removeClass('japanese').addClass('english');
      }
    });
  &lt;/script&gt;
  </code></pre>