Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 220
John Lawrence Aspden Avatar asked Oct 30 '14 22:10

John Lawrence Aspden


People also ask

What can I use instead of fixed position?

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Why position fixed is used?

Fixed positioning This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.


1 Answers

These two questions on stackoverflow and superuser are very similar.

Arguably, the easiest solution (suggested in the answers on superuser) is to install this greasemonkey script. It has the advantage that it tries to be clever by looping only over relevent html elements and attempting to recognise pseudo-pop-up windows, and not unfixing those. It will automatically run on all loaded webpages unless you edit the @include header line. (I have not actually tested it.)

If you want a bookmarklet, then this should do the job (tested on nautil.us):

javascript:(function(){x=document.querySelectorAll('*');for(i=0;i<x.length;i++){if(getComputedStyle(x[i]).position=="fixed"){x[i].style.position="absolute";}}}())

As a bonus, considering that css position: sticky headers are now also popping up their ugly heads, you can get rid of both them and "fixed" elements:

javascript:(function(){x=document.querySelectorAll('*');for(i=0;i<x.length;i++){elementStyle=getComputedStyle(x[i]);if(elementStyle.position=="fixed"||elementStyle.position=="sticky"){x[i].style.position="absolute";}}}())

Not compressed:

var x = document.querySelectorAll('*');
for(var i=0; i<x.length; i++) {
    elementStyle = getComputedStyle(x[i]);
    if(elementStyle.position=="fixed" || elementStyle.position=="sticky") {
        x[i].style.position="absolute";
    }
}
like image 52
aplaice Avatar answered Sep 22 '22 02:09

aplaice