Dealing with CSS fixed position headers and footers in Firefox

July 2, 2021

I'll start with what I tweeted:

Does anyone know of a Firefox addon that finds CSS 'fixed' position elements and removes that to make them non-fixed elements? There are a number of addons that will hide fixed elements entirely, but I would rather have them remain visible but scroll offscreen as I scroll.

The Firefox addons I know for hiding CSS 'fixed' elements are Sticky Ducky - clean the fixed elements, which seems to offer multiple levels of dealing with them, Fixed width and CSS Annihilator, which has additional effects but can be used selectively, Hide Fixed Elements, and Unfixed! - Fixed Elements Remover. Additionally, on Twitter Martin Tournoij shared a bookmarklet for this, which could easily be changed to set 'position: inherit !important;' instead of its current 'absolute'.

The reason I'm interested in this is the usual one of the plague of fixed headers and footers. Until now, I've mostly been zapping them away temporarily or permanently with uBlock Origin. Since I'm now using Stylus to make visited links visible again, I've also used it to modify a few sites to de-fix these elements instead of just removing them, which sparked my interest in a more general solution. Always hiding fixed elements isn't what I want, since some of the navigation is actually useful; I just don't want them on screen taking up space all the time. If I want to navigate, I'm perfectly capable of scrolling up (or down, but headers are more common than footers).

In looking at various of the sites I use, it's clear that applying this universally would be a bad idea (especially universally hiding fixed position elements). Thus, the ideal addon would have a site list of some sort and only take effect on some sites, with a simple toggle for it (and perhaps an option to either de-fix or hide fixed elements for each site). Martin Tournoij's bookmarklet would be a great option if only there was a way to have convenient access to it in a Firefox setup where you have the bookmarks toolbar hidden. Unfortunately as far as I know you can't put a button or a label for individual bookmarklets on the title bar.

(I don't use bookmarks, preferring to have HTML files instead.)

The Bookmarklets context menu addon (Github), adds a sub-menu for bookmarklets to the page context menu (theoretically; I haven't tested how well it works in Firefox today). It would obviously provide me relatively convenient access to this sort of Javascript driven CSS rewrites, which Martin Tournoij demonstrates can be used to to improve site readability in several ways. Greasemonkey is not exactly a bookmarklet thing, but it is about running Javascript actions on the page, and there even appear to be a variety of public userscripts to do this sort of thing (eg 1, 2).


Comments on this page:

By seth at 2021-07-02 09:39:20:

For keyboard access to bookmarklets (in firefox at least):

If you don't mind filling the urlbar with the bookmarklet, you can save it as a bookmark with a keyword. So if keyword is "f", [ctrl-l f enter] will run it.

Or just use alt-b to open the bookmarks menu, since you're not filling it with bookmarks anyway. Works even when the menubar is hidden.

By Matt S Trout (mst) at 2021-07-06 11:38:43:

A friend of mine wrote an extension called AlwaysKillSticky that's my go-to for such things.

By cks at 2021-07-06 11:57:03:

For future reference, I believe that's AlwaysKillSticky (sr.ht). Not that long ago I was pointed to it on Twitter, but then I couldn't find the tweet again when I was writing this entry.

(There's a lesson here about writing down things from Twitter and other de facto ephemeral sources.)

Now that I look, there's a number of Firefox addons that use the term 'sticky' for these things and so are best found by searching on that.

Written on 02 July 2021.
« Giving your Linux network interfaces fixed names (under udevd and networkd)
Some brief notes on turning Firefox bookmarklets into convenient buttons »

Page tools: View Source, View Normal.
Search:
Login: Password:

Last modified: Fri Jul 2 01:30:48 2021
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.