title: Change CSS of inner div when scroll reaches that div
body: <p>I am attempting to implement a scroll function where the CSS of the inner div's change when it reaches a certain height from the top. </p>
  
  <pre class="lang-js prettyprint-override"><code>var $container = $(".inner-div");
  var containerTop = $container.offset().top;
  var documentTop = $(document).scrollTop();
  var wHeight = $(window).height();
  var minMaskHeight = 0;
  var descriptionMax = 200;
  var logoMin = -200;
  var maskDelta = descriptionMax - minMaskHeight;
  var $jobOverview = $container.find(".right");
  var $jobLogo = $container.find(".left");
  
  var curPlacementPer = ((containerTop - documentTop) / wHeight) * 100;
  var topMax = 85;
  var center = 20;
  var bottomMax = -15;
  
  //console.log("Placement: " + curPlacementPer);
  
  function applyChanges(perOpen) {
    var maskHeightChange = maskDelta * (perOpen / 100);
    var opacityPer = perOpen / 100;
    var newDescriptionLeft = descriptionMax - maskHeightChange;
    var newLogoLeft = logoMin + maskHeightChange;
    if (newDescriptionLeft &lt;= 0) newDescriptionLeft = 0;
    if (newLogoLeft &gt;= 0) newLogoLeft = 0;
    if (opacityPer &gt;= 1) opacityPer = 1;
    $jobOverview.css({
      transform: "translate(" + newDescriptionLeft + "%,-50%)",
      opacity: opacityPer
    });
    $jobLogo.css({
      transform: "translate(" + newLogoLeft + "%,-50%)",
      opacity: opacityPer
    });
  }
  
  if (window.innerWidth &gt; 640) {
    $container.removeClass("mobile");
    // console.log("Placement: " + curPlacementPer);
  
    if (curPlacementPer &lt;= topMax /*&amp;&amp; curPlacementPer &gt;= center*/ ) {
      var perOpen = ((topMax - curPlacementPer) / 25) * 100;
      applyChanges(perOpen);
    } else if (curPlacementPer &lt; center /*&amp;&amp; curPlacementPer &gt;= bottomMax*/ ) {
      var perOpen = (((bottomMax - curPlacementPer) * -1) / 25) * 100;
      applyChanges(perOpen);
    } else {
      $jobOverview.css({
        transform: "translate(200%,-50%)",
        opacity: "0"
      });
      $jobLogo.css({
        transform: "translate(-300%,-50%)",
        opacity: "0"
      });
    }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="outer-div"&gt;
    &lt;div class="inner-div first"&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="inner-div second"&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="inner-div third"&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="inner-div fourth"&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently, all of the inner div's gets changed at the same time.<br>
  I noticed that when I change the <code>$container</code> class to equal <code>'.first'</code> and specify it more, it works.</p>
  
  <p>Is there any way to make the inner div's change separately, relative to its height from the top? Any way I can iterate the scroll function so I can add more inner div's in the future and not have to worry about changing my scroll function?</p>