title: Changing div position with scroll direction
body: <p>I was looking for a way to change a div position based on scroll direction using Javascript only.</p>
  <p>I found a <a href="https://codepen.io/lehollandaisvolant/pen/ryrrGx" rel="nofollow noreferrer">great resource</a> from <a href="https://codepen.io/lehollandaisvolant" rel="nofollow noreferrer">lehollandaisvolant</a> on CodePen which got me on the right track. (Big thank you!) This code outputs html content that displays the direction which the user is scrolling.</p>
  <p>Here is the original code:</p>
  <p><strong>HTML</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;Because i’m sick of using tons of shit for this basic function.&lt;/p&gt;
  &lt;p&gt;This uses no timing functions, no jQuery and fits everywhere.&lt;/p&gt;
  &lt;pre&gt;
    Scroll me.
    Scroll me.
    Scroll me.
    Scroll me.
    Scroll me.
    Scroll me.
  &lt;/pre&gt;
  &lt;div id=&quot;info-box&quot; data-scroll-direction=&quot;no scrolling yet, go on!&quot;&gt;
    Your last scolling direction was: 
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre class="lang-css prettyprint-override"><code>#info-box {
    padding: 50px;
    position: fixed;
    background: #fafafa;
    box-shadow: 3px 3px 3px silver;
    top: 20px;
    right: 20px;
    }
  #info-box::after {
    content: attr(data-scroll-direction);
    }
  pre {
    line-height: 250px;
    }
  </code></pre>
  <p><strong>JAVASCRIPT</strong></p>
  <pre class="lang-js prettyprint-override"><code>var scrollPos = 0;   // Initial state
  
  window.addEventListener('scroll', function(){  // adding scroll event
  
    // detects new state and compares it with the new one
    if ((document.body.getBoundingClientRect()).top &gt; scrollPos)
      document.getElementById('info-box').setAttribute('data-scroll-direction', 'UP');
    else
      document.getElementById('info-box').setAttribute('data-scroll-direction', 'DOWN');
      
    // saves the new position for iteration.
    scrollPos = (document.body.getBoundingClientRect()).top;
  });```
  </code></pre>