Search code examples
javascripthtmlcssfirefoxbookmarklet

How do I disable position:fixed in web pages?

This website:

http://nautil.us/

has a really annoying header that is always on screen and won't scroll away.

If I right-click on it and 'inspect element' in firefox, then I find that the css contains "position: fixed;", and if I untick this, the header behaves, and scrolls away as God intended headers to do.

Is there some way to get firefox to do this automatically, i.e. remove all position: fixed lines from all pages before rendering them?

edit-------

After a bit of thought, what I want is a bookmarklet that will kill off this sort of thing.

So how to turn SciMonster's promising-looking:

var x = document.querySelectorAll('*'); // get all elements
for (var i = 0; i< x.length; i++) {
    if (x[i].style.position == 'fixed') {
        x[i].style.position = 'static';
    }
}

into

javascript:???

suitable for going in the location field of a firefox bookmark?

With the win condition that if you go to http://nautil.us, and click the bookmarklet button, the floating header stops floating and scrolls away, as if you had deleted position: fixed; in the element inspector.

Solution

  • This is great:

    https://alisdair.mcdiarmid.org/kill-sticky-headers/

    A sticky header is a sure sign of stuff you don't want on your screen, and this just destroys them!

    Could probably modify it to change them from fixed to static, but I haven't found a case where I actually want to.