Template talk:Sticky header

Sticky headers mobile problem

Hello not sure if you are aware but all the lists for games that use sticky headers in the mobile version are not working. When on the mobile version I cant scroll to the right it is just stuck and fixed into that position?

Please help. NakhlaMan (talk) 02:59, 18 March 2025 (UTC)

@NakhlaMan: I moved your question to the related talk page. From your contributions, I believe you are asking about List of Sega Genesis games#Licensed games. Lastly, which phone and browser are you using? Jroberson108 (talk) 05:49, 18 March 2025 (UTC)

In testing on Windows 10 Chrome, it does look like the mobile version stopped working. There must have been some changes they made to the global styles. I'll have to take a closer look. Jroberson108 (talk) 06:17, 18 March 2025 (UTC)

On mobile, the parent container <div id="mw-mf-page-center"> has an overflow: hidden; style applied to it, which makes this template not work. I'm still looking into it. Jroberson108 (talk) 07:11, 18 March 2025 (UTC)

Looks like the style was added to fix some issues per : Without this the page actions and user dropdowns in advanced mobile mode or desktop mode will create a horizontal scrollbar. Jroberson108 (talk) 07:27, 18 March 2025 (UTC)

Mentioned at phab:T387768. Jroberson108 (talk) 21:07, 18 March 2025 (UTC)

@NakhlaMan: Since sticky doesn't work on Minerva (mobile) anymore, I removed the override so that wide table scrolling works again, at least when the screen is 639px wide or less. There is still an issue where the scrolling doesn't work on wider screens, but that is outside the scope of this template (see phab:T388986). Jroberson108 (talk) 19:22, 19 March 2025 (UTC)

FYI: {{sticky header}} works again on the Minerva skin, if the width of the screen is not too small. Miria~01 (talk) 18:52, 12 July 2025 (UTC)

@Miria~01: Reverted changes. Should work on smaller screens again like before. Jroberson108 (talk) 23:36, 12 July 2025 (UTC)

@Jroberson108: Not sure since when it's broken again. As of today, it does not work on mobile. —CX Zoom[he/him] ^{(let's talk • {C•X})} 07:16, 19 September 2025 (UTC)

@CX Zoom: See Template:Sticky header#Known issues, specifically the third and fourth points on <=639px width screens and Android zoom. It is not sticky when the screen is <= 639px wide, which is more likely in portrait orientation, but is sticky when wider like in landscape orientation or if portrait is wider than 639px. I'm on Android and it is not sticky in portrait, but is sticky in landscape only when you zoom out to see the entire page. I would assume iPhone works the same except without the need to zoom out as far as testing went in the past. Jroberson108 (talk) 13:56, 19 September 2025 (UTC)

Thanks for clarifying. But, if I remember correctly, it used to work fine on mobile a few months ago? —CX Zoom[he/him] ^{(let's talk • {C•X})} 10:06, 20 September 2025 (UTC)

@CX Zoom: I'm not sure which phone you have? On Android in portrait orientation, there was always layout and zoom issues on the entire page if at least one wide table used this template causing readability issues. In landscape orientation, those issues still exist, but are minimal due to the wider screen width. The global CSS for mobile has a breakpoint at <=639px where they change the table and caption elements to blocks, which makes the sticky headers not work both on this template and the sticky gadget, but the global CSS does add horizontal scrolling to tables and fits them within the main content area to resolve layout issues. Jroberson108 (talk) 15:15, 20 September 2025 (UTC)

Thanks, I must have confused it some other mode/device. Is there any personal CSS code that we can apply to force a view on portrait mode? Can you please share it? Thanks! —CX Zoom[he/him] ^{(let's talk • {C•X})} 05:23, 21 September 2025 (UTC)

@CX Zoom: User:Jroberson108/StickyTableHeadersFix should make table headers sticky for this template and the gadget on smaller screens with the issues listed there. Jroberson108 (talk) 18:28, 21 September 2025 (UTC)

Thank you very much! Seems to work fine for me also (Android on Samsung). You could also add it to the documentation just in case anyone else needs it. —CX Zoom[he/him] ^{(let's talk • {C•X})} 16:14, 22 September 2025 (UTC)

@CX Zoom: Are you saying you don't have sticky wide table issues on your Android in portrait orientation? Which phone are you using? I have issues on my Samsung Galaxy S21 5G. Test Template:Sticky header/testcases#Test wide (single row, sticky). The table in the section above it shows how the table is when not sticky. Jroberson108 (talk)

Sorry, I did not write the whole thing. Yes, the table exceeds the normal content area, so I have to scroll beyond it to view the rest of the table. But there are no zoom issues, so the text (inside and outside the table) is readable, no abnormal font sizes. —CX Zoom[he/him] ^{(let's talk • {C•X})} 21:45, 23 September 2025 (UTC)

@CX Zoom: Sounds like you confirmed the same layout issue. You don't need to zoom out to view the entire table before the headers are sticky? That's what I have to do, which makes the font size smaller for the entire page and harder to read. Jroberson108 (talk) 01:43, 24 September 2025 (UTC)

I don't need to zoom out. The zoom at pageload is same as the default, and aligns with the normal content area. To view the wide tables, however, I have to scroll horizontally. I am also unable to zoom in or out even if I want to, which was the case with mobile version of Wikipedia even before installing the script. —CX Zoom[he/him] ^{(let's talk • {C•X})} 16:08, 24 September 2025 (UTC)

@CX Zoom: Ok, so sticky headers works for you without having to zoom out. Which phone are you using? Maybe something changed? Jroberson108 (talk) 16:38, 24 September 2025 (UTC)

Galaxy F14 5G (rebranded version of Samsung Galaxy M14 5G). Android 15. Checked with Chrome & Edge. —CX Zoom[he/him] ^{(let's talk • {C•X})} 16:43, 24 September 2025 (UTC)

@CX Zoom: Galaxy S20 FE 5G also requires zooming out for sticky to work. After talking with three AIs to diagnose the issue, seems to be a hardware difference and how it affects calculations (ex. AMOLED vs. LCD). No clear answers. I updated the issues on the doc. Thanks for your help in testing. Jroberson108 (talk) 21:11, 24 September 2025 (UTC)

Small bug losing thin line between header of 1st row of data

Sticky has been added to List of Kappa Alpha Order chapters. When first loaded, there is a darker thin line between the header and the first row of data (the same as those between lines of data) after scrolling down and back up, it is no longer there. I've noticed that on others that I have added this on. Not sure if I'm using incorrectly or if it can be fixed. I know there are some things like changing order with tables with combined cells where after operations you can't restore the original, but I'd hope this could be done here.Naraht (talk) 09:43, 1 December 2025 (UTC)

@Naraht: As I recall, borders have been fixed as much as they could be. Anything further was a complete redo and reversal of the application, which caused other borders to go missing. Jroberson108 (talk) 14:48, 1 December 2025 (UTC)

Jroberson108 OK. WP:FRAT is likely to add this to approximately 300 articles (mostly of the type List of Omega Mu Omega chapters) which include tables of upwards of 500 rows. So if you want any place to have stress testing. :)Naraht (talk) 15:08, 1 December 2025 (UTC)

@Naraht: That would take it's usage up to ~7,400 pages, so I don't forsee any new issues. Jroberson108 (talk) 15:22, 1 December 2025 (UTC)

Jroberson108 Waiting on a few more comments on the wikiproject, but I've already tested my AWB editing for a subset.Naraht (talk) 15:25, 1 December 2025 (UTC)

Additional issue with notes/internal anchors.

On the fraternity chapter lists, we commonly use efn for notes and then stick a notelist below. When clicking on a list in the notelist, it moves to the correct row in the table, but that row is "under" the sticky row, and thus can't be seen. For example, go to List of Alpha Chi chapters, scroll down to the notelist and click the ^ next to d. It jumps so that the New York Kappa row is at the top of the visible area under the sticky header, *but* the row that the note is on is the one above that (Mount ida), under the sticky header.Naraht (talk) 14:11, 9 December 2025 (UTC)

Unfortunately, Wikipedia's sanitized CSS format doesn't support scroll-margin-top or setting variables, which would be a simple and elegant solution. The possibility of automatic line wrapping in the header further complicates things; moreover, there is no good way to determine the height of the header with pure CSS. So I turned to JavaScript and I wrote this, which fixes the problem on my end, no matter how much I resize the window or the text.  Andreyyshore 🆃︎ 🅲︎  20:59, 8 April 2026 (UTC)

This is a known issue. Discussed at:

• Template talk:Sticky header/Archive 1#Headings cover the row when you link an anchor in a table
• Template talk:Sticky header/Archive 2#Sticky header covering jump result
• MediaWiki talk:Gadget-StickyTableHeaders.css#Edit request: Scroll margin for elements with id attribute

Mentioned in the "Anchor" points at:

• Template:Sticky header#Known issues
• Template:Sticky table start#Known issues

Correct, templates don't support the needed CSS or any JavaScript, so you are left with user scripts. Jroberson108 (talk) 21:19, 8 April 2026 (UTC)

Thank you both for replying. Known issue seems to cover that now. Naraht (talk) 21:41, 8 April 2026 (UTC)

Can a header row further down a table be moved into thead?

Is there a way for a header cell further down in a table to move into <thead>?
In this example snippet from UEFA European Championship#Results, for instance, the header cell Losing semi-finalists should replace Third place Score Fourth place as you scroll down.

Ed.	Year	Host	Final			Third place playoff			Number of teams
			Winners	Score	Runners-up	Third place	Score	Fourth place
1	1960	France	Soviet Union	2–1 (a.e.t.)	Yugoslavia	Czechoslovakia	2–0	France	4
2	1964	Spain	Spain	2–1	Soviet Union	Hungary	3–1 (a.e.t.)	Denmark	4
7	1984	France	France	2–0	Spain	Losing semi-finalists			8
						Denmark and Portugal
8	1988	West Germany	Netherlands	2–0	Soviet Union	Italy and West Germany			8
9	1992	Sweden	Denmark	2–0	Germany	Netherlands and Sweden			8
10	1996	England	Germany	2–1 (g.g.)	Czech Republic	England and France			16

Miria~01 (talk) 17:04, 24 June 2026 (UTC)

@Miria~01: This template doesn't move anything to thead, sortable does. It requires the row to contain all headers and will move the top consecutive header rows to thead. As far as making the "Losing semi-finalists" header top sticky, this template can't do it. Even if it were possible, it wouldn't look correct since it would overlap the taller thead. Jroberson108 (talk) 22:47, 24 June 2026 (UTC)

Firefox repaint issue with row-based sticky header

I found a small intermittent repaint issue with sticky-header in Firefox.

I have only seen this in Firefox, and have not seen the same issue in Chromium-based browsers. It does not happen every time. For example, on ru:Симпсоны (10-й сезон) (the behaviour is identical to that on enwiki, I reproduced it with this version of the module, based on Template:Sticky header/styles.css), when scrolling the episode table up and down, the sticky header sometimes starts flickering or disappears. In my testing it may happen roughly once every several scroll attempts; if it does not reproduce, reloading the page and trying again sometimes triggers it. Sometimes the header flickers while scrolling, and sometimes it disappears after scrolling stops. One more reproducible symptom: when the header disappears, hovering over the "Title/Название" header cell causes only that single cell to repaint that single cell while the rest of the header remains invisible. Another fairly reliable trigger seems to be moving the cursor to the right scrollbar after scrolling further down the table; the exact threshold may vary, but it often starts happening once the sticky header is roughly a full viewport above its original position.

While debugging with document.elementsFromPoint(...), the sticky header sometimes appeared below other table content in the paint/hit-test order instead of being the top visible element. This seems related to the current implementation applying position: sticky to the first table row (tr). Applying sticky positioning to the first-row header cells (th) instead fixed the issue in testing.

For Module:Episode table/sandbox, I currently worked around this by adding a module-specific class and applying sticky positioning to the header cells in the module's CSS. That works, but it feels like this behavior probably belongs in Template:Sticky header/styles.css rather than being duplicated locally.

Possible solutions:

• Add a new opt-in cell-based sticky mode to Template:Sticky header/styles.css, which modules/templates such as "Episode table" could use.
• Change the existing sticky-header behavior from row-based sticky positioning to cell-based sticky positioning, although this may be riskier because the template is widely used.
• Keep the workaround local to Module:Episode table/sandbox/styles.css if changing the shared sticky header styles is not desirable.

I am not sure whether the current implementation should be changed globally, or whether adding a new opt-in class would be safer. Solidest (talk) 12:44, 1 July 2026 (UTC)

Here is a quick test page: User:Solidest/episodes_test.

To reproduce the bug, scroll down to the episode table. Then either scroll the table/page up and down until the sticky header starts flickering or disappearing; if it does not happen, reload the page and try again. Alternatively, scroll to the lower half of the episode table and move the mouse over the browser scrollbar. Solidest (talk) 13:03, 1 July 2026 (UTC)

@Solidest: Seems like it triggers when I hover over a link further down in the table, then I have to scroll for the headers to reappear. It didn't occur when using sortable, which moves header rows to the thead. I setup a simpler test without the module at Template:Sticky header/testcases#Test Firefox hover links hide sticky headers. Seems like a Firefox rendering glitch, which isn't the only one as borders go missing in Firefox too. As far as moving the sticky style from the row to its headers, inspect element shows it works, but would require much more testing in different browsers and skins. Also, I'm not sure if the change would mess up any of the current usage. Testcases should cover the majority. Jroberson108 (talk) 16:40, 1 July 2026 (UTC)

Thanks. In my testing, I do not see a difference between hovering over a link and hovering over plain text inside the table. I also tried removing links, template calls, and ref-notes from the table, and the bug was still reproducible. However, if I move the cursor outside the table, the bug no longer seems to trigger when I scroll up and down. Solidest (talk) 19:06, 1 July 2026 (UTC)