Snažím sa navrhnúť tabuľku HTML, v ktorej hlavička zostane v hornej časti stránky, keď ju používateľ posunie mimo zobrazenia. Tabuľka môže byť napríklad o 500 pixelov nižšie na stránke, ako to mám urobiť, aby keď používateľ posunie hlavičku mimo zobrazenia (prehliadač nejakým spôsobom zistí, že už nie je v zobrazení okien), zostala umiestnená na vrchu? Vie mi niekto dať na to Javascriptové riešenie?
<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>
Takže vo vyššie uvedenom príklade chcem, aby sa <thead>
posúvalo spolu so stránkou, ak sa dostane mimo zobrazenia.
DÔLEŽITÉ: Nechcem riešenie, pri ktorom bude mať <tbody>
rolovací panel (overflow:auto).
Niečo také by ste urobili tak, že by ste sa napojili na obsluhu udalosti scroll
na okne window
a pomocou ďalšej tabuľky table
s pevnou pozíciou by ste zobrazili hlavičku v hornej časti stránky.
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();
}
});
Toto zobrazí hlavičku tabuľky, keď používateľ posunie dostatočne hlboko na to, aby sa skryla pôvodná hlavička tabuľky. Opäť sa skryje, keď používateľ posunie stránku dostatočne ďaleko nahor.
Pracovný príklad:
Snažil som sa dosiahnuť rovnaký efekt bez toho, aby som musel používať stĺpce pevnej veľkosti alebo pevnú výšku celej tabuľky.
Riešenie, na ktoré som prišiel, je hack. Spočíva v tom, že sa celá tabuľka duplikuje, potom sa skryje všetko okrem záhlavia a to má pevnú pozíciu.
<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);
Pozri tu:
Edit: aktualizovaný kód tak, aby thead mohol prijímať udalosti ukazovateľa(takže tlačidlá a odkazy v hlavičke stále fungujú). Tým sa odstránil problém, ktorý nahlásili luhfluh a Joe M.
Nový jsfiddle tu: http://jsfiddle.net/cjKEx/
Problém sa mi podarilo vyriešiť zmenou šírky stĺpcov. Začal som s Andrewovým riešením vyššie (ďakujem veľmi pekne!) a potom som pridal jednu malú slučku na nastavenie šírky klonovaných td's:
$("#header-fixed td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $("#table-1 td").eq(index).width();
});
});
To vyriešilo problém bez toho, aby som musel klonovať celú tabuľku a skrývať jej telo. V JavaScripte a jQuery (a v stack overflow) som úplný nováčik, takže ocením akékoľvek pripomienky.