title: Running a function to change images every time <h4> reaches middle of window
body: <p>I'm completely blocked with this issue. I need to run a function which changes the image every time my <code>h4</code> reaches the middle of window. In my case, one image per <code>h4</code>, changing it when user scrolls down or scrolls up. That's to say, each <code>img</code> will belong to a <code>h4</code>. Up to now, I've achieved change the opacity per <code>h4</code> but I don't get change the image. Here's my html:</p>
  
  <pre><code>&lt;div id="column-left"&gt;
    &lt;h4 class="active"&gt;Targets&lt;/h4&gt;
    &lt;h4&gt;Valors&lt;/h4&gt;
    &lt;h4&gt;Me &lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;div id="column-right"&gt;
      &lt;img src="img/about/map.jpg" class="active" alt="Map"/&gt;
      &lt;img src="img/about/bridge.jpg" alt="Bridge"/&gt;
      &lt;img src="img/about/road.jpg" alt="Road"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my code:</p>
  
  <pre><code>var findMiddleElement = (function(docElm){
  var viewportHeight = docElm.clientHeight,
      elements = $('h4');
  $('h4').first().css('opacity','1','important');
  return function(e){
      var middleElement;
      if( e &amp;&amp; e.type == 'resize' )
          viewportHeight = docElm.clientHeight;
  
      elements.each(function(){
          var pos = this.getBoundingClientRect().top;
          // if an element is more or less in the middle of the viewport
          if( pos &gt; viewportHeight/2.5 &amp;&amp; pos &lt; viewportHeight/1.5 ){
              middleElement = this;
              console.log('I am in the middle');
              changeImage();
              return false; // stop iteration 
  
          }
      });
  
      $(middleElement).css({opacity:'1', transition : 'opacity 1s ease-in-out'});
  
  }
  })(document.documentElement);
  
  $(window).on('scroll resize', findMiddleElement);
  
  function changeImage(){
      console.log('I am ready to change the image');
      $('img').each(function(){
          $('.active').removeClass('active');
          $(this).addClass('active');
      });
  }
  </code></pre>
  
  <p>And here's the fiddle: 
  <a href="http://jsfiddle.net/antoniobarcos/owv1ysto/4/" rel="nofollow">jsfiddle.net/antoniobarcos/owv1ysto/4/</a></p>
  
  <p>Thanks in advance.</p>