Jeg forsøger at designe en HTML-tabel, hvor overskriften forbliver øverst på siden, når OG KUN når brugeren scroller den ud af syne. F.eks. kan tabellen være 500 pixels nede fra siden, hvordan kan jeg gøre det sådan at hvis brugeren scroller overskriften ud af visningen (browseren registrerer at den ikke længere er i vinduesvisningen på en eller anden måde), vil den blive siddende øverst? Nogen der kan give mig en Javascript løsning til dette?
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
Så i ovenstående eksempel vil jeg have <thead>
til at rulle med siden, hvis den går ud af visning.
VIGTIGT: Jeg leder IKKE efter en løsning, hvor <tbody>
får en scrollbar (overflow:auto).
Du kan gøre noget lignende ved at udnytte scroll
-hændelseshåndteringen på window
og bruge en anden table
med en fast position til at vise overskriften øverst på siden.
HTML:
<table id="header-fixed"></table>
CSS:
#header-fixed {
position: fixed;
top: 0px; display:none;
background-color:white;
}
JavaScript:
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
Dette vil vise tabelhovedet, når brugeren scroller så langt ned, at det oprindelige tabelhoved er skjult. Det vil blive skjult igen, når brugeren har rullet siden langt nok op igen.
Arbejdseksempel:
Jeg forsøgte at opnå den samme effekt uden at skulle bruge kolonner af fast størrelse eller have en fast højde for hele tabellen.
Den løsning, jeg fandt frem til, er et hack. Den består i at duplikere hele tabellen og derefter skjule alt undtagen overskriften, og få den til at have en fast position.
<div id="table-container">
<table id="maintable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>some really long line here instead</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<div id="bottom_anchor"></div>
</div>
body { height: 1000px; }
thead{
background-color:white;
}
function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#maintable").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll>anchor_top && scroll<anchor_bottom) {
clone_table = $("#clone");
if(clone_table.length == 0){
clone_table = $("#maintable").clone();
clone_table.attr('id', 'clone');
clone_table.css({position:'fixed',
'pointer-events': 'none',
top:0});
clone_table.width($("#maintable").width());
$("#table-container").append(clone_table);
$("#clone").css({visibility:'hidden'});
$("#clone thead").css({'visibility':'visible','pointer-events':'auto'});
}
} else {
$("#clone").remove();
}
}
$(window).scroll(moveScroll);
Se her:
Edit: Opdateret koden, så thead kan modtage pointer events(så knapper og links i headeren stadig virker). Dette løser det problem, som luhfluh og Joe M. har rapporteret.
Ny jsfiddle her: http://jsfiddle.net/cjKEx/
Det lykkedes mig at løse problemet ved at ændre kolonnebredden. Jeg startede med Andrew's løsning ovenfor (mange tak!) og tilføjede derefter en lille løkke for at indstille bredderne på de klonede td's:
$("#header-fixed td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $("#table-1 td").eq(index).width();
});
});
Dette løser problemet uden at skulle klone hele tabellen og skjule kroppen. I'm helt ny til JavaScript og jQuery (og til stack overflow), så alle kommentarer er værdsat.