title: How do I add an event listener on position of a div?
body: <p>I want a css property of a div to change when a sibling div hits the top of the viewport. </p>
  
  <p>Specifically I would like the "second-subdiv" to have <code>overflow: scroll</code> only when the "first-subdiv" hits the top of the viewport.</p>
  
  <p>Basically I would like to set <code>overflow: hidden</code> on the "second-subdiv" and then write a couple of lines of js in which I would say:</p>
  
  <p><code>add.EventListener(when-first-subdiv-is-on-top, change the overflow property)</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="first-div"&gt;
    &lt;h1&gt;Title&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class= "second-div"&gt;
    &lt;div class="first subdiv"&gt;
      &lt;h1&gt;You are Beautiful&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="second subdiv"&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
      &lt;h2&gt;Something Good&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>html, body {
    margin: 0;
    padding: 0;
  }
  .first-div {
    margin: 0;
    width: 100%;
    height: 80vh;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    h1 {
      color: white;
    }
  }
  .second-div {
    display: flex;
    justify-content: space-around;
  }
  .subdiv {
    width: 50%;
    height: 100vh;
    text-align: center;
    overflow: scroll;
  }
  .first.subdiv {
    background-color: magenta;
  }
  .second.subdiv {
  
  }
  </code></pre>
  
  <p>Any help with that?</p>
  
  <p>Thanks,</p>
  
  <p>Matteo</p>