Wie deaktiviere ich die Position: in Webseiten behoben?

Question

Diese Webseite:

http://nautil.us/

hat einen wirklich ärgerlich Header, der immer auf dem Bildschirm und wird nicht weg bewegen.

Wenn ich mit der rechten Maustaste darauf und 'inspect element' in Firefox, dann finde ich, dass die CSS enthält "position: fixed;", und wenn ich dies deaktivieren, verhält sich der Header und scrollt weg, wie Gott beabsichtigte Header machen.

Gibt es eine Möglichkeit, firefox dies automatisch zu tun, d. H. Entfernen Sie alle Position: Festnetzzeilen von allen Seiten vor dem Rendern?

bearbeitet -------

Nach einem wenig Gedanken, was ich will, ist ein Bookmarklet, die diese Art der Sache töten werden.

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

in

javascript:??? 

geeignet für den Gang in die Lage Feld eines Firefox-Lesezeichen:

So wie SciMonster viel versprechende schau zu verwandeln?

Mit dem Sieg Bedingung, dass, wenn Sie http://nautil.us gehen, und klicken Sie auf die Schaltfläche Bookmarklet, stoppt der schwebenden Kopf schwimmend und blättert weg, als ob Sie position: fixed; im Element Inspektor gelöscht hatte.

Answer 1

fand ich this answer die erzählt, wie Elemente mit einer bestimmten CSS-Eigenschaft zu finden (mit jQuery):

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

Wenn wir dann festgelegt, die zurückgegeben verwenden, können wir die Positionen auf statisches zurücksetzen:

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

Legen Sie dies einfach in ein Benutzer-Skript (mit jQuery enthalten) und Sie sind fertig!

---

Und eine nicht-jQuery Lösung ...

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

Answer 2

Danke, Scimonster. Früher habe ich Ihre jQuery-Lösung, sondern verändert es für den Header-Tag abzufragen (und importiert 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'); 

Answer 3

Das ist großartig:

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

Ein klebriges Header ein sicheres Zeichen von Sachen ist Sie wollen nicht auf Ihrem Bildschirm, und das zerstört sie einfach!

Konnte es wahrscheinlich ändern, um sie von fest zu statisch zu ändern, aber ich habe einen Fall nicht gefunden, wo ich wirklich will.

Answer 4

Diese beiden Fragen auf stackoverflow und superuser sind sehr ähnlich.

Die einfachste Lösung (empfohlen in answers on superuser) ist die Installation this greasemonkey script. Es hat den Vorteil, dass es versucht, schlau zu sein, indem es nur über html Elemente und versucht, Pseudo-Pop-up-Fenster zu erkennen, und nicht diese zu lösen. Es wird automatisch auf allen geladenen Webseiten ausgeführt, es sei denn Sie bearbeiten die @include Kopfzeile. (Ich habe nicht wirklich getestet.)

Wenn Sie ein Bookmarklet wollen, dann sollte dies den Job (getestet auf 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";}}}()) 

Als Bonus, die CSS position: sticky Header unter Berücksichtigung jetzt sind ihre hässlichen Köpfe auch auftauchen, können Sie sowohl sie los und „fixed“ Elemente:

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

Nicht komprimiert:

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

Answer 5

-Update erneut wieder

A Vanille JS Lösung:

/* 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