Make elements follow the scroll when they head-butt the top of the window

jquery.headbutt.js

$.fn.headbutt = function (offset) {
  if (offset == null) {
    offset = 0;
  }
  this.each(function () {
    var $elem = $(this)
      , initialTop = $elem.offset().top
      , initialPosition = $elem.css('position')
    ;
    $window = $(window).on('scroll', function () {
      if ($window.scrollTop() > initialTop - offset) {
        $elem.css({ position: 'fixed', top: offset });
      } else {
        $elem.css({ position: initialPosition });
      }
    });
  });
};

usage.js

$('#side-menu').headbutt();

// or

$('#side-menu').headbutt($('#fixed-menu').height());