JavaScript/jQuery add class when element comes into viewport?
<p>Is there a way to add a class when the element that I want to apply the class to comes into the viewport? Or when the bottom of the screen is a certain distance past the top of the element?</p>

<p>Right now I have the effect that I want using something like this:</p>

<pre><code>if ($(document).scrollTop() &gt; 100) {
                    $(".graph-line.two").addClass("graph-75");
</code></pre>

<p>The problem with this is that it's relative to the document height, so when I shrink the page (or view on mobile) and the elements stack on top of each other, the page becomes taller and the class (animations) don't start when the element comes into view.</p>

<p>I've seen other people asking similar questions and I tried to implement the answers they got but I couldn't get anything working so any help would be greatly appreciated.</p>

<p>This is what I have:</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() {
  $(".graph-line.one").addClass("graph-75");
  $(".graph-line-2.one").addClass("opacity");
  $(window).scroll(function() {

    if ($(document).scrollTop() &gt; 100) {
      $(".graph-line.two").addClass("graph-75");
      $(".graph-line-2.two").addClass("opacity");
    }

    if ($(document).scrollTop() &gt; 450) {
      $(".graph-line.three").addClass("graph-75");
      $(".graph-line-2.three").addClass("opacity");
    }

    if ($(document).scrollTop() &gt; 800) {
      $(".graph-line.four").addClass("graph-75");
      $(".graph-line-2.four").addClass("opacity");
    }

    if ($(document).scrollTop() &gt; 1150) {
      $(".graph-line.five").addClass("graph-75");
      $(".graph-line-2.five").addClass("opacity");
    }

    if ($(document).scrollTop() &gt; 1500) {
      $(".graph-line.six").addClass("graph-75");
      $(".graph-line-2.six").addClass("opacity");
    }
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.graph {
  display: block;
  margin: 100px auto;
  transform: rotate(-90deg);
  will-change: transform;
}
.graph-line {
  stroke-dasharray: 628px;
  stroke-dashoffset: -628px;
  transform-origin: center;
}
.graph-75 {
  animation: graph-75 1200ms ease forwards;
}
@keyframes graph-75 {
  0% {
    stroke-dashoffset: 0;
    transform: rotate(360deg);
  }
  100% {
    stroke-dashoffset: 471;
    transform: rotate(0deg);
  }
}
.graph-line-2 {
  transition: opacity 700ms;
  opacity: 0.1;
}
.opacity {
  opacity: 1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;

&lt;h1&gt;Scroll Down&lt;/h2&gt;

&lt;svg width="250" height="250" class="graph photoshop"&gt;
      &lt;circle class="graph-line-2 one" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /&gt;
      &lt;circle class="graph-line one" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /&gt;
      &lt;text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff"&gt;Photoshop&lt;/text&gt;
     &lt;/svg&gt;



&lt;svg width="250" height="250" class="graph photoshop"&gt;
      &lt;circle class="graph-line-2 two" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /&gt;
      &lt;circle class="graph-line two" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /&gt;
      &lt;text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff"&gt;Photoshop&lt;/text&gt;
     &lt;/svg&gt;



&lt;svg width="250" height="250" class="graph photoshop"&gt;
      &lt;circle class="graph-line-2 three" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /&gt;
      &lt;circle class="graph-line three" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /&gt;
      &lt;text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff"&gt;Photoshop&lt;/text&gt;
     &lt;/svg&gt;



&lt;svg width="250" height="250" class="graph photoshop"&gt;
      &lt;circle class="graph-line-2 four" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /&gt;
      &lt;circle class="graph-line four" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /&gt;
      &lt;text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff"&gt;Photoshop&lt;/text&gt;
     &lt;/svg&gt;



&lt;svg width="250" height="250" class="graph photoshop"&gt;
      &lt;circle class="graph-line-2 five" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /&gt;
      &lt;circle class="graph-line five" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /&gt;
      &lt;text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff"&gt;Photoshop&lt;/text&gt;
     &lt;/svg&gt;



&lt;svg width="250" height="250" class="graph photoshop"&gt;
      &lt;circle class="graph-line-2 six" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" /&gt;
      &lt;circle class="graph-line six" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" /&gt;
      &lt;text class="graph-text" text-anchor="middle" x="50%" y="-46%" fill="#fff"&gt;Photoshop&lt;/text&gt;
     &lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://codepen.io/mrseanbaines/pen/KNGYZW" rel="nofollow noreferrer">Here's the codepen if you prefer</a></p>