RequestAnimationFrame alternative for headroom.js (showing headroom.js)

HTML

<div id="shownav" class="mobile-nav headroom headroom--pinned headroom--top headroom--not-bottom">
<div class="mobile-content"><div class="navtext">Menu</div></div>
<div class="close-nav">X</div></div>
<div class="main">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<img src="http://i.imgur.com/O8sylpM.gif">
<div class="overlay">

</div>
</div>

CSS

.main{
  height:4000px;
}
img{
  width:33%;
  float:left;
  }
  .overlay{z-index:1;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.5);
  }
.mobile-nav {
    position: fixed;
    display: block;
    bottom: 10px;
    right: 10px;
    text-align: center;
    height: 100px;
    width: 100px;
    z-index: 11;
}

.mobile-nav::before, .mobile-nav, .mobile-content {
    transform: translate3d(0,0,0);
}
.headroom {
    transition: all .2s ease-in-out;
}
}
body {
    margin: 0px 0px 0px 0px;
    background-repeat: repeat;
    text-align: left;
}
.mobile-nav::before {
    animation: pulse 1.5s 2s 2;
    -webkit-animation: pulse 1.5s 2s 2;
    -moz-animation: pulse 1.5s 2s 2;
    -o-animation: pulse 1.5s 2s 2;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 70px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
    background: #8fc6de;
}
.mobile-nav::before, .mobile-nav, .mobile-content {
    transform: translate3d(0,0,0);
}
*:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mobile-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 12px;
    overflow: hidden;
    transition: all 0.3s;
}
.navtext {
    font-size: 12px;
    font-family: proza;
    opacity: 1;
    transition: all 0.2s;
    transition-delay: 0.2s;
}

.mobile-nav.headroom--unpinned {
    height: 40px;
    width: 40px;
}

JavaScript

var scroll = window.requestAnimationFrame ||
             window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame ||
             window.msRequestAnimationFrame ||
             window.oRequestAnimationFrame ||
             // IE Fallback, you can even fallback to onscroll
             function(callback){ window.setTimeout(callback, 1000/60) };

var lastPosition = 0;
var situation = 0;
var offset = 10;
var mediumPos = 0;
var lastOffsetDown = mediumPos + offset;
var lastOffsetUp = mediumPos - offset;
var direction = 1;



function loop(){

    if (lastPosition == window.pageYOffset) {
        scroll(loop);
        return false;
    } 
else { 

// Indicator of going up
if(lastPosition > window.pageYOffset && direction == 0){
mediumPos = window.pageYOffset;
lastOffsetUp = mediumPos - offset;
direction = 1;

// Indicator of going down
} else if (lastPosition < window.pageYOffset && direction == 1) {
mediumPos = window.pageYOffset;
lastOffsetDown = mediumPos + offset;
direction = 0;
};

// Going down - actions
if(situation == 0 && lastOffsetDown < window.pageYOffset && direction == 0){
$("#shownav").addClass("headroom--unpinned");
situation = 1;
} 

// Going up - actions
else if (situation == 1 && lastOffsetUp > window.pageYOffset && direction == 1){
$("#shownav").removeClass("headroom--unpinned");
situation = 0;
}
lastPosition = window.pageYOffset;
    scroll( loop );
}
}
loop();