title: Make a tiny arrow move left to right as user scrolls up and down page
body: <p>I'm looking to incrementally move/slide a small arrow shaped element from left to right as the user scrolls up and down the page. </p>
  
  <p>For example if i scroll down 20px the arrow moves to the right 5px
  and if i scroll up 40px the arrow moves to the left 10px  </p>
  
  <p>My site navigation will also use smooth scroll page jumps, so the arrow needs to respond and position itself to the navigated menu heading(such as a default pixel location for each nav link).</p>
  
  <p>Can anyone provide direction and best coding for this? </p>
  
  <p>Thanks</p>
  
  <pre><code>.arrow {
  enter code here  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 5px solid #7AC943;
  position:relative;
  margin-top: -5px;
  margin-left: 41px;
  position: fixed;
  }
  
  .arrow:after {
  content:'';
  position:absolute;
  top:2px;
  left:-5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 4px solid black;
  }
  </code></pre>