Simple "sticky bar" based on scrolling -- without using jQuery ( IE 10+ )

sticky.html

<!-- some page content -->

<!-- buttons, that will stick to top as the user keeps scrolling -->
<div id="JsPreshopSticky">
  <button>Sign up</button>
  <button>Sign in</button>
</div>

<!-- more page content -->

<!-- another place further down the page where we want to hide the sticky (optional) -->
<div id="JsPreshopStickyHide">
  <button>Sign up</button>
  <button>Sign in</button>
</div>

<!-- more page content... -->

sticky.js

(function(){

var $$ = function(selector) {
  return document.querySelector(selector);
};
$$.on = function(el, event, fn) {
  el.addEventListener(event, fn);
};
$$.windowScrollTop = function() {
  return window.pageYOffset || window.scrollTop || 0;
};
$$.offsetTop = function(el) {
  return this.windowScrollTop() + el.getBoundingClientRect().top;
};
$$.toggleClass = function(el, className, active) {
  el.classList[active ? "add" : "remove"](className); // IE10+
};

var STICKY_ACTIVE = 'JsPreshopSticky--active';

var preshopApp = {
  onLoad: function() {
    // if we're on the right page...
    if ($$('#JsPreshopSticky')) {
      $$.on(window, 'scroll', this.onScroll.bind(this));
    }
  },

  onScroll: function() {
    var currentOffset = $$.windowScrollTop();

    // make buttons sticky from this point...
    var elTargetOffset = $$('#JsPreshopSticky');
    var targetOffset  = $$.offsetTop(elTargetOffset) - 5;
    $$.toggleClass(elTargetOffset, STICKY_ACTIVE, (currentOffset >= targetOffset));

    // un-sticky when the next set of buttons is near...
    var elTargetHideOffset = $$('#JsPreshopStickyHide');
    var targetHideOffset = $$.offsetTop(elTargetHideOffset) - 50;
    if (currentOffset >= targetHideOffset) {
      $$.toggleClass(elTargetOffset, STICKY_ACTIVE, false);
    }
  },

}
$$.on(window, 'load', preshopApp.onLoad());
})();

sticky.scss

#JsPreshopSticky {
  padding:1em 0 1em;

  &.JsPreshopSticky--active {
    position:-webkit-sticky;
    position:sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.09); // nice drop shadow when the bar is sticky
    background:rgba(255,255,255,0.95); // make it semi transparent, while it is sticky
  }
}