Autor Zpráva
MilanKarkulka
Profil
Když si zkusíte s touto stránku (www.srovnavacpujcek.cz/srovnani/) zajet dolů, tak vám zmizí z očí hlavička tabulky. A nevíte, že třeba druhý sloupeček je Příjem a třetí sloupeček Zaměstnání.

Chtěl bych, aby při scrolování dolů hlavička té tabulky zůstala viditelná (připnula se nahoru stránky). Ale, pokud odscroluji příliš nízko, tak že již tabulka vidět nebude, tak aby hlavička zase zmizela.

Poradíte jak na to? Google nepomáhá... .
pcmanik
Profil
MilanKarkulka:
Dobrú skúsenosť mám napríklad s jQuery FloatHead
MilanKarkulka
Profil
Děkuji. Ale jQuery je pro mě asi nejposlednější řešení. A použití JS vůbec na předposledním místě.

Kdyby to šlo pomocí CSS, tak by to bylo perfektní! Možná bych ještě zkousnul čisté JS.... .
pcmanik
Profil
MilanKarkulka:
Aha prepáč myslel som ze jQuery tam už máš keďže sa ti tá tabuľka sortuje.
V CSS sa to nedá spraviť. A ak to chceš v "čistom" JS, tak pohľadaj table floating header, alebo niečo na ten štýl. Prípadne si to môžeš aj sám vytvoriť, nemala by to byť až taká veda.
Tomáš123
Profil
MilanKarkulka:
Kdyby to šlo pomocí CSS, tak by to bylo perfektní!
Perfektné to v čistom CSS zrejme nebude. Existuje ale pár možností, ktoré čiastočne spĺňajú tvoje požiadavky.

Pre JavaScriptovú alternatívu sa pozri na Fixní menu při rolování.
pcmanik
Profil
Tomáš123:
Pre JavaScriptovú alternatívu sa pozri na Fixní menu při rolování.
Menu a hlavička tabuľky sú dve rozličné veci, ktoré potrebujú aj rozličný prístup. Určite nestačí použiť postup na uvedenom odkaze.
MilanKarkulka
Profil
A jak potom nechat tu hlavicku zmizet, pokud budu jiz scrolovany dole pod tabulkou?

Protoze k prichyceni se pouzivat "odpocitani vzdalenosti od horniho okraje prohlizece, jakmile je nulovy, tak se hlavicka zafixuje". Jak ji ale pak necham zmizet?

Mejme na pameti, ze velikost tabulky se muze menit, jelikoz je tam filtr, ktery nechava mizet radky.
Keeehi
Profil
MilanKarkulka:
Protoze k prichyceni se pouzivat "odpocitani vzdalenosti od horniho okraje prohlizece, jakmile je nulovy, tak se hlavicka zafixuje". Jak ji ale pak necham zmizet?
Zase odpočítáváš vzdálenost tentokrát konce tabulky od horního okraje prohlížeče.

Mejme na pameti, ze velikost tabulky se muze menit, jelikoz je tam filtr, ktery nechava mizet radky.
To přece není problém. Po každé změně si může javascript znovu přepočítat, kde je aktuální konec tabulky.
MilanKarkulka
Profil
Podařilo se mi zprovoznit řešení pomocí toho JS. Ale... .

Problém je ovšem následující - v okamžiku, kdy zafixuji (position fixed) hlavičku té tabulky, tak se pokazí její rozměry. Hlavička přestane respektovat délku sloupců podle obsahu tabulky. A hlavička si rozpočítá svoje vlastní délky sloupců podle svého obsahu.

Řešení asi je mít fixní délku sloupců, ale to je tak blbé řešení, že se mi do toho ani nechce.
Kajman
Profil
Zkuste si tabulku zduplikovat (buď celou nebo jen hlavičku a buňkám v hlavičce nastavit šířku originálu). A fixujte až tuto kopii.
MilanKarkulka
Profil
Zkuste si tabulku zduplikovat (buď celou nebo jen hlavičku a buňkám v hlavičce nastavit šířku originálu). A fixujte až tuto kopii.

Jak bych toho mohl dosáhnout? JS?
Kajman
Profil
U novějších prohlížečů by asi šlo použít ke získání šířky funkci window.getComputedStyle

Živá ukázka

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: