Tabellenüberschrift soll nur bis zum Bowserrand scrollen

[rony12]

Hallo,

nachdem mit heute Morgen gut geholfen wurde, stell ich mal meine zweite Frage

wir haben eine Inventar Datenbank, in der man natürlich suchen kann.
Diese Ausgabe wird in einer Tabelle angezeigt, welche natürlich eine Überschrift hat.

Nun scrollt man hoch und die Überschriften scrollen aus dem Bildschirm "heraus".

Nun war meine Idee, ob man es so machen kann, dass die Tabellenüberschriften am Browserrand stehen bleibt, und der Rest der Tabelle drunter her scrollt.

Sobald man dann wieder hochscrollt sollte sich die Überschrift von dem Rand "lösen", und wieder der darüberstehenden Inhalt zu sehen sein...

ich habe im Netz nach Beispielen gesucht - so ähnlich wie bei 9gag.com die Überschrift zu den Bildern

ich hoffe man konnte es verstehen - denn ich weiß gerade gar nicht so recht wonach ich suchen soll.
Häufig finde ich nur eben die css Geschichte mit dem fixieren - das wäre aber nicht das was ich haben will, denn dann würden die Überschriften immer mit scrollen.

 

[benneq]

Das ganze läuft mit JavaScript. Ich bin mir ziemlich sicher, dass JQuery sowas schon eingebaut hat

 

[Daaron]

Das Ganze dürfte in etwa so funktionieren:
- binde ans onscroll-Event eine neue Funktion
- Funktion: Für alle betroffenen Überschriften (einheitliche CSS-Klasse als Selektor ist toll) -> hole Position -> wenn weiter runter gescrollt als Y der Überschrift -> positioniere die Überschrift statisch am oberen Bildrand. Wenn nach oben gescrollt wurde musst du den Kram halt wieder zurücksetzen

 

[benneq]

Deine Idee ist prinzipiell richtig, aber stell dir mal vor du hast 2 Tabellen in einem Dokument. Dann hast du schnell 2 Tabellen Header oben kleben, die sich überschneiden können und wie Murphy es will ist natürlich immer genau der sichtbar, der zur falschen Tabelle gehört . Also das Ganze ist evtl. schon ein wenig komplizierter, wenn man es vollständig lösen will und nicht nur für eine einzelne Tabelle.
Auch bin ich dagegen bei jedem Scroll-Event alle Tabellen zu überprüfen, das Teil jagt jedes Mal durch den kompletten Dom-Tree. Man sollte initial einmal eine Hash-Tabelle aufstellen, wo die y-Koordinaten der jeweiligen Tabelle vermerkt sind und diese mit der jeweiligen Tabelle verknüpfen. Dann jagt man nur noch durch die kleine Hashmap.
Noch besser wäre eine sortierte Liste, dann müssen nicht immer alle überprüft werden

Alles ist besser als bei jedem scrollTo-Event über einen CSS-Selektor zuzugreifen. Vor allem, wenn man weiß, dass so ein scrollTo-Event mind. 50x pro Sekunde ausgeführt wird. Damit hast du dann schnell die CPU bei 100% nur, weil jemand scrollt.
Also fügt man zum obigen Plan folgendes hinzu: Ein Timer. Dieser wird so eingestellt, dass max. alle 250ms der Check durchgeführt wird und damit die grafische Anpassung.

Auch wenn es bequem geht ist Effizienz doch sehr wichtig. Ich hätte jedenfalls kein Bock, dass auf einmal meine Musik aussetzt oder so, nur weil ich auf ner Seite scrolle

 

[Daaron]

Du hast noch nicht erlebt, was n 1920px breiter und ca. 2-300px hoher Parallax-Effekt über einem genauso großen Slider mit nem 4-5 Jahre altem Mac und FF3.x anstellt *G*
Nä, stimmt schon, hier muss man etwas optimieren. Den DOM muss man ja z.B. nur ein einziges Mal durchlaufen und legt sich dabei ein Array von Elementen an, die man dann manipuliert. Wobei die modernen Selektor-Engines wirklich richtig flott sind.

 

[benneq]

Ich bemerk selbst auf meinem 2011 MacBook mit Quadcore hier und da nicht-optimierte Seiten Also das ganz schön auf die Eier gehn.

Vielleicht sind die modernen Engines so schnell, weil sie eben den Kram in ner Arraylist cachen

 

[rony12]

öhm....

ja ^^

danke für viel infos...aber si recht hat mir das jetzt nicht weitergeholfen^^

ich bin einer, der eig. nicht mit solchen sachen am hut hat, und muss mich nur um unsere inventar datenbank kümmern.
Und weil ich schon so mnache sachen zurecht gebastelt habe, hab ich etwas blut geleckt, und wollte soetwas wie oben genannt realisieren.

 

[benneq]

Grobe Google Suchbegriffe sind: jquery table fixed header
dann findet man z.B. das: http://www.mustafaozcan.net/en/page/jQuery-Fixed-Table-Header-Plugin.aspx