a few functions that use scroll

scrollTools.js

(function() {
// author: Will Farley
// github: @goldhand
  

// Create cross browser requestAnimationFrame method:
window.requestAnimationFrame = window.requestAnimationFrame
 || window.mozRequestAnimationFrame
 || window.webkitRequestAnimationFrame
 || window.msRequestAnimationFrame
 || function(f){setTimeout(f, 1000/60)}

// set marker on page scorll
function setScrollMarker(yAxis) {
  return window.pageYOffset>=yAxis;
};

// simulate iPhone scroll or "pull" down to refresh action
var refreshMarker = {
  check: function() {
    if(!this.timeoutID && window.pageYOffset<this.yAxis) {
      this.refresh();
    };
    if(this.timeoutID && window.pageYOffset>=0) {
      this.cancel();
    };
  },
  setup: function(yAxis) {
    this.yAxis = yAxis || -20;
  },
  alert: function(message) {
    alert(message);
    delete this.timeoutID;
  },
  refresh: function() {
      var self = this;
      this.timeoutID = window.setTimeout(function(msg) {self.alert(msg);}, [1000], "REFRESH!!!!");
  },
  cancel: function() {
    window.clearTimeout(this.timeoutID);
    delete this.timeoutID;
  }
};

refreshMarker.setup();

// return the direction the user is scrolling
var scrollDirection = {
  check : function() {
    this.up = this.record > window.pageYOffset;
    this.down = this.record < window.pageYOffset;
    this.direction = this.record > window.pageYOffset ? 'up' : 'down';
    this.record = window.pageYOffset; // set record after comparing
  },
  setup: function() {
    this.record = window.pageYOffset;
  }
};

scrollDirection.setup();

// fix a bootstrap navbar to the top of page right after a user scrolls past the nav
var fixedNavbar = {
  getElem: function(navId) {
    navId = navId || 'navbar';
    return document.getElementById(navId);
  },
  fix: function(direction) {
    // choices: 'top' 'bottom'
    direction = direction || 'top';
    if(this.position()=='static') {
      this.elem.classList.remove('navbar-static-top');
      this.elem.classList.add('navbar-fixed-'+direction);
      this.spacer.style.marginTop=Number(this.spacer.style.marginTop.split('px')[0])+this.elem.offsetHeight+'px';
      // add margin to existing margin-top to compensate for nav height
    };
  },
  unFix: function() {
    if(this.position()!='static') {
      this.elem.classList.add('navbar-static-top');
      this.elem.classList.remove('navbar-fixed-'+this.position());
      this.spacer.style.marginTop=Number(this.spacer.style.marginTop.split('px')[0])-this.elem.offsetHeight+'px';
      // subtract margin from existing margin
    };
  },
  position: function() {
    if(this.elem.classList.contains('navbar-fixed-top')) {
      return 'top';
    };
    if(this.elem.classList.contains('navbar-fixed-bottom')) {
      return 'bottom';
    };
    return 'static';
  },
  check: function() {
    this.active = setScrollMarker(this.activatePoint);
    if(this.active && this.position() == 'static') {
      // active but its not visible to user yet
      this.fix();

    };
    if(!!!this.active && this.position() != 'static') {
      this.unFix();
    };
  },
  activate: function() {

  },
  setup: function(navId) {
    this.elem = this.getElem(navId);
    this.spacer = document.getElementsByTagName('body')[0];
    this.activatePoint = this.elem.offsetTop;
    this.active = setScrollMarker(this.activatePoint);

  }
}

fixedNavbar.setup();


// run all the functions in this loop
function scrollLoop() {
  refreshMarker.check();
  scrollDirection.check();
  fixedNavbar.check();
};

window.addEventListener('scroll', function() {
  requestAnimationFrame(scrollLoop);
}, false);

})();