title: Edit Div when scrolled over (like in google docs)
body: <p>Basically, I want to code something as seen in the Google docs homepage.</p>
  <p>When you open it up, it has the template section, then organizing section, etc,
  but when you scroll past the organizing section (when, owned by anyone, date, a to z), it manually adds itself to the navbar and adds a box shadow.</p>
  <p><a href="https://i.stack.imgur.com/fAFH7.png" rel="nofollow noreferrer">Before</a></p>
  <p><a href="https://i.stack.imgur.com/v6g4W.png" rel="nofollow noreferrer">After</a></p>
  <p>I've considered using an <code>eventListener</code> like:</p>
  <pre class="lang-js prettyprint-override"><code>window.addEventListener('scroll', () =&gt; {
      console.log(&quot;Page is being scrolled&quot;)
  }
  </code></pre>
  <p>But I'm having trouble measuring whether a user has scrolled a specific amount of pixels through the page. Is there any way to check this?</p>