title: I need someone to fix this small script,it almost works! images appear on view/scroll
body: <p>Hi guys I'm having some trouble with this script! </p>
  
  <p>I have a galerie of images with an opacity set to 0 in my css, and I'd like those images to appear when scrolling down(on view) In this script I have set it so they appear when they are 50% of the image height but they appear at 100% I don't know why..</p>
  
  <pre><code>&lt;script&gt;    
  
      function isScrolledIntoView(elem, percent_image_before_appearing){
      if(typeof percent_image_before_appearing == "undefined") percent_image_before_appearing = 0;
  
      var docViewTop = $(window).scrollTop();
      var docViewBottom = docViewTop + $(window).height();
      var elemTop = $(elem).offset().top;
      var elemBottom = elemTop + $(elem).height();
      var break_point = elemTop + (percent_image_before_appearing/100) * $(elem).width();
      return ((elemBottom &lt;= docViewBottom) &amp;&amp; ( (break_point) &gt;= docViewTop));
  }
      function changeOpacity(){
      $("img").each(function(){
      var img = $(this);
  
          if (isScrolledIntoView(this,50)){
              img.css("opacity","1.0");
          }
      });
  }
  
  $(function(){
  
      changeOpacity();
      $(window).scroll(changeOpacity);
  });
  
  &lt;/script&gt;     
  </code></pre>