This website:

/

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 , and click the bookmarklet button, the floating header stops floating and scrolls away, as if you had deleted position: fixed; in the element inspector.

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.

• javascript
• html
• css
• firefox
• bookmarklet

• 1 You could probably make your own FF plugin as I doubt one exists. But you'd probably break a lot of stuff. – Leeish Commented Oct 30, 2014 at 22:18
• 1 (Feel free to add the [javascript] and/or [userscript] tags, based on my answer.) – Scimonster Commented Oct 30, 2014 at 22:24
• 1 You could do a bookmarklet. The minute you navigate to the site you could click a button in the browser window and it would disappear. WIKI LINK HERE. Give me a mo to read up about it and I'll have a look again. – Billy Commented Oct 30, 2014 at 22:28
• 1 What browser are you using ? – Billy Commented Oct 30, 2014 at 22:56
• You will break a lot of layouts like that. You'll probably make things harder than they are now. – Ian Hazzard Commented Oct 31, 2014 at 2:23

5 Answers 5

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";
    }
}

I found this answer which tells how to find elements with a specific CSS property (using jQuery):

var x = $('.myselector').filter(function () { 
    return this.style.position == 'fixed' 
});

If we then use that returned set, we can reset the positions to static:

var x = $('*').filter(function () { 
    return this.style.position == 'fixed' 
}).css('position', 'static');

Just place this in a userscript (with jQuery included) and you're all set!

And a non-jQuery solution...

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';
    }
}

Thank you, Scimonster. I used your jQuery solution, but altered it to query for the header tag (and imported jQuery):

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

$("header").css('position', 'absolute'); 

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.

Update again again

A Vanilla JS solution:

/* find the topbar by coordinate */
var topbar
var el = document.elementFromPoint(document.documentElement.clientWidth - 200, 20)
while (el) {
    if (getComputedStyle(el).position == 'fixed') topbar = el
    el = el.parentNode;
    if (el == document.body) break
}
if (topbar == undefined) return

/* disable position:fixed */
// topbar.style.position = 'absolute'
// ↑ this line doesn't work well, because sometime offsetParent is not <body>
// ↓ workaround
var paint = function (enforce) {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    var threshold = 200
    if (!enforce && scrollTop > threshold * 3) return
    var offset = scrollTop / threshold
    if (offset > 1.2) offset = 1.2
    topbar.style.transform = 'translateY(-' + offset * 100 + '%)'
}
paint(true) // initialize
document.addEventListener('scroll', () => paint())

/* when use JS to frequently change CSS value, disable CSS transition to avoid weird delay */
// topbar.style.transition = 'transform 0s'
// ↑ this line doesn't work because of compatibility
// ↓ workaround
topbar.classList.add('remove-topbar')
var style = document.createElement('style')
style.innerHTML = '.remove-topbar{transition:transform 0s !important}'
document.head.appendChild(style)

Userscript: https://gist.github.com/zcyzcy88/909b77054b88fd69e8a0834b84e7a68b