うまい表現がみつからないのですが、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