ubuntuusers.de

tach,

ich hab hier eine internetseite.

angenommen ich hab hier ein paar überschriften/informationen und dann eine große tabelle (bestehend aus massenweise <div>s mit display:table-...)

ich möchte, dass die tabelle für die spalten überschriften bekommt, hab ich auch soweit fertig.

wenn ich jetzt weiter runter scrolle, kommt irgendwann der punkt, an dem die überschriften über den oberen bildschirmrand wegscrollen. das möchte ich verhindern.

position: fixed ist ungenügend, da ich ja nicht immer den oberen bildschirmrand will, sondern erst, wenn die überschrift eigentlich weg wäre.

eine umwandlung von position: static nach fixed sobald es den oberen rand erreicht geht auch nicht, da ja dann der raum im layout freigegeben wird, was alle möglichen änderungen nach sich zieht (u.a. würde die tabelle erst mal um die überschriftenhöhe nach oben springen), der platz muss also reserviert bleiben. Außerdem würde vertikales scrollen nicht funktionieren, was eigentlich auch unverzichtbar ist....

ich denke, ein generelles position: relative und die änderung des wertes top: ??px beim scrollen wird das machen, was ich will. dazu muss ich dann aber immer wissen, wie viele px nach oben aus dem fenster herausstehen, und wo die normale position des containers wäre, da ich diese ja abziehen muss.

ich hoffe, mir kann jemand helfen.

btw: das ganze muss nur für ff >= 3.6.8 funktionieren, mit einem anderen browser wird in der tabelle nicht gearbeitet.

auf google hab ich vergeblich nach einer lösung gesucht, da findet man immer nur die position:fixed-problematik

lg
blaimi

Blaimi schrieb:

angenommen ich hab hier ein paar überschriften/informationen und dann eine große tabelle (bestehend aus massenweise <div>s mit display:table-...)

Wenn der Inhalt Tabellenspezifisch ist, solltest Du auch eine Tabelle verwenden, statt eine Div-Suppe daraus zu kochen

ich möchte, dass die tabelle für die spalten überschriften bekommt, hab ich auch soweit fertig.

Eben dafür gibt es <thead> (s.o.)

wenn ich jetzt weiter runter scrolle, kommt irgendwann der punkt, an dem die überschriften über den oberen bildschirmrand wegscrollen. das möchte ich verhindern.

Du könntest dem tbody eine fixe Höhe geben und overflow: auto setzen. Somit wird der Tabelleninhalt scrollbar und die Tabelle selbst bleibt mit den Überschriften an Ort und Stelle.

btw: das ganze muss nur für ff >= 3.6.8 funktionieren, mit einem anderen browser wird in der tabelle nicht gearbeitet.

für IE6 wird immer argumentiert, das es so viele Intranet Anwendungen gibt, die extra für den erstellt wurden. Mach bitte nicht das gleiche mit FF.

hannemann schrieb:

Wenn der Inhalt Tabellenspezifisch ist, solltest Du auch eine Tabelle verwenden, statt eine Div-Suppe daraus zu kochen

ist eigentlich keine tabelle, sondern ein mit js gebauter baum den man auch auf-/zuklappen kann, d.h. ich müsste in der tabelle eine tabelle in der tabelle in der tabelle... bauen... da find ich meine div-lösung besser, da mach ich zeile für zeile...

Eben dafür gibt es <thead> (s.o.)

s.o. 😉

Du könntest dem tbody eine fixe Höhe geben und overflow: auto setzen. Somit wird der Tabelleninhalt scrollbar und die Tabelle selbst bleibt mit den Überschriften an Ort und Stelle.

geht nicht, eben weil sich meine "tbody"-höhe durch das auf-/zuklappen ständig ändert

für IE6 wird immer argumentiert, das es so viele Intranet Anwendungen gibt, die extra für den erstellt wurden. Mach bitte nicht das gleiche mit FF.

1. zu spät 😉

2. ich werd hier bestimmt nicht auf den ie rückicht nehmen, ich will ja irgendwann fertig werden. mit anderen browsern sollte es eh keine probleme geben, die sind ja genauso wie ich standardkonform ☺

trotzdem danke für die antwort

blaimi

Blaimi schrieb:

hannemann schrieb: ist eigentlich keine tabelle, sondern ein mit js gebauter baum den man auch auf-/zuklappen kann, d.h. ich müsste in der tabelle eine tabelle in der tabelle in der tabelle... bauen... da find ich meine div-lösung besser, da mach ich zeile für zeile...

Dafür eignet sich eine verschachtelte Liste ganz gut.

Soll das eine Art Navigationsbaum werden?

hannemann schrieb:

Dafür eignet sich eine verschachtelte Liste ganz gut.

hatte ich am anfang auch, aber da gabs probleme damit weil ich quasi in jedem feld n <input> hab, bzw. <div>-container, die nur bei klick sichtbar sind usw... sind bis jetzt mom 414 zeilen js nur zum baum bauen.... also recht aufwändig, da es so viele unterschiedliche möglichkeiten der befüllung gibt (text, textinput, pseudo-dropdown mit text, pseudo-dropdown mit textinput, checkbox, checkbox mit text, checkbox mit textinput, checkbox mit pseudo-dropdown.... jeweils aktiviert oder deaktiviert.... oder aktivierbar... das ganze mit nichtvordefinierten kindern...)

Soll das eine Art Navigationsbaum werden?

s.o.

btw: ich habs übrigens selber gemacht:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
div { border: solid black 1px; }
div#head { position:relative; font-weight:bold; background-color:white; }
</style>
</head>
<body onscroll="scroll()">
<h1>bissl dokumentüberschrift</h1>
<p>bissl text</p>
<div id="head">bissl tabellenüberschrift</div>
<script type="application/x-javascript">
	<!--
relativetop = 0;
Element = document.getElementById('head');
offsettop = Element.offsetTop; 
function scroll() {
	scrollheight = document.body.scrollTop;
	relativetop = scrollheight - offsettop;
	(relativetop > 0) ? Element.style.top = relativetop + 'px' : Element.style.top = '0px';
}
	-->
</script>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
<div>bissl inhalt</div>
</body>
</html>

blaimi

offsetTop und scrollTop beinhalten auch die Einheit, du musst diese vor der Berechnung erst in eine Zahl wandeln, parseInt().

Gaa ned... Guggst Du Firebug 😛

parseInt bzw. parseFloat brauchst Du nur für Styles. Die Angaben aus dem DOM sind ohne Einheit und immer in px.

Hm, ich könnte schwören irgendwann mal die Einheiten dabei zu haben.

Bei Styles sind die Einheiten dabei. Manche benutzen das, würde ich aber wegen des nötigen Funktionsaufrufes von parseInt versuchen zu vermeiden. Ausserdem kann es sein, das der Browser eigenmächtig z.B. irgendwelche paddings eingefügt hat. Dann stimmt das nicht mehr.

hat in meinem fall übrigens nicht geklappt, musste window.pageYOffset anstatt document.body.scrollTop nehmen. Weiß auch nicht warum. docu... war immer "0".

blaimi

scrollTop ist IE spezifisch und auch nur wenn dieser nicht im Quirksmodus läuft.

Andersherum, im Quirkxmode lt. es document.body.scrollTop und im Standardmode document.documentElement.scrollTop.

Wennze Crossbrowser brauchst:

getScrollOffset = function () {
    var scrOfX = 0, scrOfY = 0;
    if (typeof window.pageYOffset == "number") {
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
    } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
    } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
    }
    return {"x":scrOfX,"y":scrOfY};
};