Jak wyłączyć pozycję: naprawiono na stronach internetowych?

Question

tej stronie:

http://nautil.us/

ma naprawdę denerwujące nagłówek, który jest zawsze na ekranie i nie będzie przewijać dalej.

Jeśli kliknę prawym przyciskiem myszy i "sprawdzę element" w firefoxie, to stwierdzam, że css zawiera "position: fixed;", a jeśli to odznaczę, to nagłówek zachowuje się i przewija, jak Bóg zamierzał nagłówki do zrobienia.

Czy jest jakiś sposób, aby uzyskać firefox, aby to zrobić automatycznie, to znaczy usunąć wszystkie pozycje: ustalone linie ze wszystkich stron przed ich renderowaniem?

edit -------

Po chwili myśli, czego chcę to bookmarklet że zabije się tego rodzaju rzeczy.

Więc jak włączyć SciMonster za obiecująco wyglądające:

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

do

javascript:??? 

nadaje się do dzieje w polu adresu zakładki Firefox?

Przy stanie wygranej, jeśli przejdziesz do http://nautil.us i klikniesz przycisk bookmarklet, pływający nagłówek przestanie się unosić i przewija, jakbyś usunął position: fixed; w inspektorze elementów.

Answer 1

znalazłem this answer który mówi jak znaleźć elementy o określonej właściwości CSS (przy użyciu jQuery):

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

Jeśli używamy że wrócił ustawiony, możemy zresetować pozycji na statyczne:

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

Po prostu umieść to w usercriptie (z dołączonym jQuery) i gotowe!

---

i roztwór bez jQuery ...

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

Dziękuję Scimonster. Kiedyś swoje rozwiązanie jQuery, ale zmienił go do kwerendy dla tagu nagłówka (i importowane 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

To jest wielki:

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

lepki nagłówek jest to pewny znak rzeczy nie chcesz na ekranie, a to po prostu je niszczy!

Prawdopodobnie mógłbym zmodyfikować, aby zmienić je z poprawionego na statyczne, ale nie znalazłem przypadku, w którym faktycznie chcę.

Answer 4

Te dwa pytania dotyczące stackoverflow i superuser są bardzo podobne.

Prawdopodobnie najłatwiejszym rozwiązaniem (sugerowanym w answers on superuser) jest instalacja this greasemonkey script. Ma on tę zaletę, że próbuje być sprytny, puszczając tylko elementy znaczników html i próbując rozpoznać pseudo-wyskakujące okna, a nie je odblokowując. Automatycznie uruchomi się na wszystkich załadowanych stronach, chyba że edytujesz linię nagłówkową . (I nie zostały faktycznie przetestowane.)

Jeśli chcesz bookmarkletu, to powinno załatwić sprawę (testowane na 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";}}}()) 

Jako bonus, zważywszy, że css position: sticky nagłówki obecnie również pojawiały się ich brzydkie głowy, można pozbyć się zarówno do nich i „stałe” elementy:

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

Nie skompresowane:

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

Aktualizacja ponownie ponownie

roztwór A Vanilla JS:

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