Faire apparaître une div lorsque l'utilisateur scroll

Bonjour, j'essaie actuellement de créer mon propre blog en utilisant jekyll.

Pour faire ma liste de post j'ai fais ça:

Mon but est d'afficher les deux premières lignes lorsque l'utilisateur arrive sur la page puis s'il scroll faire apparaître les posts lignes par lignes. Actuellement pour code j'ai ça:

---
layout: default
---
<div class="home">
  <h1>Derniers articles</h1>

   <div class="summary">

 <ul class="summary-list">
    {% for post in site.posts %}
      <li class="summary-element">        
        <a class="summary-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>                  
        <p class="summary-preview">{{ post.excerpt }}</a></p>
      </li>
    {% endfor %}
  </ul>
  </div>
    <script>
      //Don't know what to put here

    </script>

</div>

Je sais que c'est possible car je l'ai déjà vu sur un site cet effet et j'ai bien envie d'avoir un peu le même. De
Pour tous vous dire je pige rien au js et je trouve pas de bon cours débuter donc je suis preneur si certain on des liens (par pitié pas celui d'openclassroom). Je suis aussi preneur de lien vers la doc de jQuery avec une fonction qui permet de faire cet effet, j'arriverais bien à improviser un truc.

Cordialement
Augustin