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

$(window).load(function(){

/*!
 * headroom.js v0.9.3 - Give your page some headroom. Hide your header until you need it
 * Copyright (c) 2016 Nick Williams - http://wicky.nillia.ms/headroom.js
 * License: MIT
 */
!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.Headroom=b()}(this,function(){"use strict";function a(a){this.callback=a,this.ticking=!1}function b(a){return a&&"undefined"!=typeof window&&(a===window||a.nodeType)}function c(a){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var d,e,f=a||{};for(e=1;e<arguments.length;e++){var g=arguments[e]||{};for(d in g)"object"!=typeof f[d]||b(f[d])?f[d]=f[d]||g[d]:f[d]=c(f[d],g[d])}return f}function d(a){return a===Object(a)?a:{down:a,up:a}}function e(a,b){b=c(b,e.options),this.lastKnownScrollY=0,this.elem=a,this.tolerance=d(b.tolerance),this.classes=b.classes,this.offset=b.offset,this.scroller=b.scroller,this.initialised=!1,this.onPin=b.onPin,this.onUnpin=b.onUnpin,this.onTop=b.onTop,this.onNotTop=b.onNotTop,this.onBottom=b.onBottom,this.onNotBottom=b.onNotBottom}var f={bind:!!function(){}.bind,classList:"classList"in document.documentElement,rAF:!!(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame)};return window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame,a.prototype={constructor:a,update:function(){this.callback&&this.callback(),this.ticking=!1},requestTick:function(){this.ticking||(requestAnimationFrame(this.rafCallback||(this.rafCallback=this.update.bind(this))),this.ticking=!0)},handleEvent:function(){this.requestTick()}},e.prototype={constructor:e,init:function(){return e.cutsTheMustard?(this.debouncer=new a(this.update.bind(this)),this.elem.classList.add(this.classes.initial),setTimeout(this.attachEvent.bind(this),100),this):void 0},destroy:function(){var...