Skip to content

Instantly share code, notes, and snippets.

@RubyRonin
Created November 4, 2015 00:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RubyRonin/7d8d2450d294f3ee0881 to your computer and use it in GitHub Desktop.
Save RubyRonin/7d8d2450d294f3ee0881 to your computer and use it in GitHub Desktop.
;(function($) {
$.fn.fixMe = function() {
return this.each(function() {
var $this = $(this),
$t_fixed;
function init() {
$this.wrap('<div class="container" />');
$t_fixed = $this.clone();
$t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
resizeFixed();
}
function resizeFixed() {
$t_fixed.find("th").each(function(index) {
$(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
});
}
function scrollFixed() {
var offset = $(this).scrollTop(),
tableOffsetTop = $this.offset().top,
tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
if(offset < tableOffsetTop || offset > tableOffsetBottom)
$t_fixed.hide();
else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
$t_fixed.show();
}
$(window).resize(resizeFixed);
$(window).scroll(scrollFixed);
init();
});
};
})(jQuery);
/*
$(document).ready(function(){
$("table").fixMe();
$(".up").click(function() {
$('html, body').animate({
scrollTop: 0
}, 2000);
});*/
});
@RubyRonin
Copy link
Author

body{
font:12px normal Arial,sans-serif;
color:#000;
}

h1{
text-align:center;
text-transform:uppercase;
letter-spacing:-2px;
font-size:2.5em;
margin:20px 0;
}

.container{
width:90%;
margin:auto;
}

table{
border-collapse:collapse;
width:100%;
}

.blue{
/* border:2px solid red; */
}

.blue thead{
background:red;
}

.purple{
border:2px solid #9B59B6;
}

.purple thead{
background:#9B59B6;
}

thead{
color:white;
}

th,td{
text-align:center;
padding:2px 0;
}

tbody tr:nth-child(even){
background:red;
color:white;
}

tbody tr:hover{
background:#BDC3C7;
color:#FFFFFF;
}

.fixed{
top:0;
position:fixed;
width:auto;
display:none;
border:none;
}

.scrollMore{
margin-top:600px;
}

.up{
cursor:pointer;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment