A CodePen by Kris Haamer. "Bounce" Fixed

index.html

<p id="scroll">ARCHITECTURE</p>
<div id="e">NU</div>

script.js

document.getElementById('e').style.position='absolute';
preScroll=0;
document.onscroll=function() {
  if(document.body.scrollTop>30) {
    document.getElementById('scroll').className='hidden';
  }
  else {
    document.getElementById('scroll').className='';
  }
    
  document.getElementById('e').style.top=document.body.scrollTop+'px';
  if(preScroll<document.body.scrollTop)
    document.getElementById('e').style.margin='255px 0 0 50%';
  else
    document.getElementById('e').style.margin='55px 0 0 50%';
  setTimeout(function() {
    document.getElementById('e').style.margin='155px 0 0 50%';
  },300);
  preScroll=document.body.scrollTop;
};

style.css

body {
  background:#777;
  margin:0;
  height:2000px;
}

#scroll {
  background:rgba(255,255,255,0.7);
  width:100%;
  top:0;
  margin:0;
  padding:70px 0;
  border-bottom:10px solid #fff;
  opacity:1;
  position:fixed;
  font-family:'helvetica';
  font-style:normal;
  font-size:60px;
  font-weight:100;
  text-align:center;
  text-shadow:1px 5px 0px #fff;
  -webkit-transition:0.9s;
  -moz-transition:0.9s;
  -ms-transition:0.9s;
  -o-transition:0.9s;
  transition:0.9s;
}

#scroll.hidden {
  top:-210px;
  opacity:0;
}

#e {
  background:#000;
  width:74px;
  height:97px;
  top:0px;
  left:-50px;
  margin:155px 0 0 50%;
  padding:50px 10px 10px 10px;
  border:10px solid #fff;
  border-radius:1000px;
  overflow:hidden;
  position:fixed;
  font-family:'Helvetica';
  font-size:50px;
  font-weight:900;
  color:#fff;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  -ms-transition:0.5s;
  -o-transition:0.5s;
  transition:0.5s;
}