Simple affix

affix.js

var lastKnownScroll = 0;
var ticking = false;
var getPaddingTop = function(elm) {
  return Number(
    window
      .getComputedStyle(elm)
      .getPropertyValue("padding-top")
      .slice(0, -2)
  );
};
var getScrollLimit = function(elm) {
  return elm.getClientRects()[0].top - getPaddingTop(elm) - elm.offsetHeight;
};
var rAF = function(fn) {
  if (!ticking) {
    requestAnimationFrame(fn);
  }

  ticking = true;
};

var stickOnScroll = function(elm) {
  var limit = getScrollLimit(elm);
  return function() {
    var currentScroll = lastKnownScroll;

    if (currentScroll > limit) {
      elm.classList.add("fixed");
    } else {
      elm.classList.remove("fixed");
    }
    ticking = false;
  };
};

document.addEventListener("DOMContentLoaded", function() {
  var elm = document.querySelector("[data-affix]");
  var scrollFn = stickOnScroll(elm);

  window.addEventListener("scroll", function() {
    lastKnownScroll = window.pageYOffset;
    rAF(scrollFn);
  });

  rAF(scrollFn);
});