title: Fade in on Scroll Plain JavaScript No JQuery
body: <p>I'm trying to implement a text fade in on scroll similar to this <a href="https://codepen.io/hollart13/post/fade-in-on-scroll" rel="nofollow noreferrer">https://codepen.io/hollart13/post/fade-in-on-scroll</a>.</p>
  
  <pre><code>$(function(){  // $(document).ready shorthand
  $('.monster').fadeIn('slow');
  });
  
  $(document).ready(function() {
  
  /* Every time the window is scrolled ... */
  $(window).scroll( function(){
  
      /* Check the location of each desired element */
      $('.hideme').each( function(i){
  
          var bottom_of_object = $(this).position().top + $(this).outerHeight();
          var bottom_of_window = $(window).scrollTop() + $(window).height();
  
          /* If the object is completely visible in the window, fade it it */
          if( bottom_of_window &gt; bottom_of_object ){
  
              $(this).animate({'opacity':'1'},1500);
  
          }
  
      }); 
  
  });
  
  });
  </code></pre>
  
  <p>However, I do not want to use JQuery. I want to accomplish this using plain JavaScript. Unfortunately, most of the examples online are JQuery based and there's very little with plain JavaScript.</p>
  
  <p>This is what I've attempted so far to "translate" this JQuery into plain JS. It's not working. Could anyone point at where I went wrong?</p>
  
  <pre><code>window.onscroll = function() {myFunction()};
  
  function myFunction() {
  var elements = document.getElementsByClassName("target");
  
  for(var i = 0; i &lt; elements.length; i++){
  var bottomOfObject = elements[i].getBoundingClientRect().top + 
  window.outerHeight;
  
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : 
  (document.documentElement || document.body.parentNode || 
  document.body).scrollTop;
  
  var bottomOfWindow = scrollTop + window.innerHeight;
  
  if(bottomOfWindow &gt; bottomOfObject){
    $(this).animate({'opacity': '1'}, 1500);
  }
  }
  console.log(bottomOfObject);
  }
  </code></pre>
  
  <p>Thanks in advance!</p>