Skip to content

Instantly share code, notes, and snippets.

@masaedw
Created October 13, 2011 09:16
Show Gist options
  • Select an option

  • Save masaedw/1283817 to your computer and use it in GitHub Desktop.

Select an option

Save masaedw/1283817 to your computer and use it in GitHub Desktop.
画面をスクロールしてもテーブルのヘッダが画面上に残るようになるjQueryプラグイン
/*
テーブルのヘッダが画面に残るようにする
$("#table").stickHeader(".header");
のようにヘッダのセレクタを指定して呼び出す。
*/
$.fn.stickHeader = function (selector_) {
var selector = selector_ || ".header";
var self = $(this);
$(window).scroll(function () {
var header = self.find(selector);
var windowOffset = $(window).scrollTop();
var headerOffset = header.offset().top;
var headerHeight = header.outerHeight();
var first = self.find("tr")
.filter(function () {
var offset = $(this).offset().top;
if (headerOffset < offset) {
return windowOffset + headerHeight <= offset;
} else {
return windowOffset <= offset;
}
})
.first();
if (first.get(0) != header.get(0)) {
first.before(header);
}
});
return self;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment