title: Javascript Scroll Load Dynamic Content Into Page When User Reaches Bottom
body: <p>I have tried over and over to solve this but I feel like I'm missing something.</p>
  
  <p>Basically I am trying to make it so my website will load additional content when the user reaches the bottom of the page. </p>
  
  <p>The website: <a href="http://www.dark-quill.com/" rel="nofollow noreferrer">http://www.dark-quill.com/</a></p>
  
  <p>I have used this as a template for what I'm trying to do but I have no idea what any of it means. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script&gt;
        function yHandler(){
          // Watch video for line by line explanation of the code
          // http://www.youtube.com/watch?v=eziREnZPml4
          var wrap = document.getElementById('wrap');
          var contentHeight = wrap.offsetHeight;
          var yOffset = window.pageYOffset; 
          var y = yOffset + window.innerHeight;
          if(y &gt;= contentHeight){
              // Ajax call to get more dynamic data goes here
              wrap.innerHTML += '&lt;div class="newData"&gt;&lt;/div&gt;';
          }
        }
        window.onscroll = yHandler;
      &lt;/script&gt;
      &lt;style&gt;
        div#wrap{
          width:1000px;
          margin:0px auto;
        }
  
  div.newData{height:1000px; background:#09F; margin:10px 0px;}
  
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="status"&gt;0 | 0&lt;/div&gt;
      &lt;div id="wrap"&gt;
  
      // what goes here?? htmL?
  
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have NEVER used JavaScript / Ajax / Jquery before all I understand is html and css. So if someone could PLEASE explain to me very clearly of what I'm supposed to do to get this working, I would really love it. </p>
  
  <p>For example: I don't understand what the "wrap" div purpose is. I also dont understand what is meant by "Ajax call to get more dynamic data goes here". </p>
  
  <p>Again, as you can see on my website, the stories are listed one after the other, and after about 5 stories or so, I want it so the website will load an additional 5 stories once the user reaches the bottom of the page, and continuously do that until there are no more stories. Just a very simple thing that seems to be super complex to me. </p>
  
  <p>Thanks in advance. </p>