要素をスクロール時にウィンドウ上部にひっかかるようにする jQuery プラグイン #JavaScript

うまい表現がみつからないのですが、facebook のサイドバーとかのアレです。

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 });
      }
    });
  });
};

こんな感じで使います。

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

固定レイアウトのヘッダーがあるような場合には、オフセットも設定できます。

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

Gist にも貼っておきました。
https://gist.github.com/3957501