@@Linuchs > in meinem Geneology-Projekt habe ich eine HTML-Tabelle aller Personen mit z.B. `<tr id=id125>` > > Wenn ich nun auf eine Zeile verlinke, wird sie am oberen Fensterrand dargestellt, verdeckt von dem sticky thead. Gibt es eine Möglichkeit, die top-Positionierung der Zeile zu beeinflussen? Ja, [`scroll-padding-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top) ist dein Freund. Die Höhe des Headers kannst du i.a.R. aber nicht kennen, du musst sie also mit JavaScript auslesen. Die Höhe des Headers kann sich beim Ändern der Fenstergröße ändern (Menü braucht bspw. unterschiedlich viele Zeilen), da bietet sich ein `ResizeObserver` an. Da man am besten CSS-Eigenschaften nicht mit JavaScript direkt ändert, bietet es sich an, eine *custom property* zur Datenübergabe zu nutzen. So wie in [diesem Posting](https://forum.selfhtml.org/self/2022/mar/06/strange-rendering-bug-im-firefox/1797318#m1797318) ganz unten. Im Stylesheet steht dann bei mir ```css html { scroll-padding-top: var(--header-height); overflow: auto; } ``` Beispiel: [Tribbles](https://bittersmann.de/startrek/series/tos#S2E15) ganz oben. ~~(Wenn man auf der Seite ist, nochmal refreshen. Das JavaScript muss ja erst durchlaufen, bevor der interne Anker angesprungen wird.)~~ 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix

@@Linuchs > in meinem Geneology-Projekt habe ich eine HTML-Tabelle aller Personen mit z.B. `<tr id=id125>` > > Wenn ich nun auf eine Zeile verlinke, wird sie am oberen Fensterrand dargestellt, verdeckt von dem sticky thead. Gibt es eine Möglichkeit, die top-Positionierung der Zeile zu beeinflussen? Ja, [`scroll-padding-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top) ist dein Freund. Die Höhe des Headers kannst du i.a.R. aber nicht kennen, du musst sie also mit JavaScript auslesen. Die Höhe des Headers kann sich beim Ändern der Fenstergröße ändern (Menü braucht bspw. unterschiedlich viele Zeilen), da bietet sich ein `ResizeObserver` an. Da man am besten CSS-Eigenschaften nicht mit JavaScript direkt ändert, bietet es sich an, eine *custom property* zur Datenübergabe zu nutzen. So wie in [diesem Posting](https://forum.selfhtml.org/self/2022/mar/06/strange-rendering-bug-im-firefox/1797318#m1797318) ganz unten. Im Stylesheet steht dann bei mir ```css html { scroll-padding-top: var(--header-height); overflow: auto; } ``` Beispiel: [Tribbles](https://bittersmann.de/startrek/series/tos#S2E15) ganz oben. (Wenn man auf der Seite ist, nochmal refreshen. Das JavaScript muss ja erst durchlaufen, bevor der interne Anker angesprungen wird.) 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix

@@Linuchs > in meinem Geneology-Projekt habe ich eine HTML-Tabelle aller Personen mit z.B. `<tr id=id125>` > > Wenn ich nun auf eine Zeile verlinke, wird sie am oberen Fensterrand dargestellt, verdeckt von dem sticky thead. Gibt es eine Möglichkeit, die top-Positionierung der Zeile zu beeinflussen? Ja, [`scroll-padding-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top) ist dein Freund. Die Höhe des Headers kannst du i.a.R. aber nicht kennen, du musst sie also mit JavaScript auslesen. Die Höhe des Headers kann sich beim Ändern der Fenstergröße ändern (Menü braucht bspw. unterschiedlich viele Zeilen), da bietet sich ein `ResizeObserver` an. Da man am besten CSS-Eigenschaften nicht mit JavaScript direkt ändert, bietet es sich an, eine *custom property* zur Datenübergabe zu nutzen. So wie in [diesem Posting](https://forum.selfhtml.org/self/2022/mar/06/strange-rendering-bug-im-firefox/1797318#m1797318) ganz unten. Beispiel: [Tribbles](https://bittersmann.de/startrek/series/tos#S2E15) ganz oben. 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix