Comment désactiver la position: réparé dans les pages Web?

Ce site:

Http://nautil.us/

A un en-tête vraiment ennuyeux qui est toujours à l'écran et ne se défile pas.

Si je clique droit dessus et "inspecter l'élément" dans firefox, je trouve que le css contient "position: fixed;", et si je décochez ceci, l'en-tête se comporte et se déplace comme Dieu a voulu que les en-têtes fassent.

Existe-t-il un moyen d'obtenir Firefox pour le faire automatiquement, c'est-à-dire supprimer toute position: lignes fixes de toutes les pages avant de les rendre?

modifier——-

Après un peu de réflexion, ce que je veux, c'est un bookmarklet qui va tuer ce genre de chose.

Alors, comment transformer SciMonster prometteur-regardant:

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

dans

 javascript:??? 

Convient pour aller dans le champ de localisation d'un marque-photo de Firefox?

Avec la condition de gagner que si vous allez sur http://nautil.us , et cliquez sur le bouton bookmarklet, l'en-tête flottant arrête de flotter et se défile, comme si vous aviez supprimé la position: fixed; Dans l'inspecteur des éléments.

J'ai trouvé cette réponse qui explique comment trouver des éléments avec une propriété CSS spécifique (en utilisant jQuery):

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

Si nous utilisons alors cet ensemble retourné, nous pouvons réinitialiser les positions en statique:

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

Il suffit de placer ceci dans un userscript (avec jQuery inclus) et vous êtes tous ensemble!


Et une solution non-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'; } } 

Merci, Scimonster. J'ai utilisé votre solution jQuery, mais l'ai modifiée pour demander la balise d'en-tête (et jQuery importé):

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

Ces deux questions sur stackoverflow et superuser sont très similaires.

Sans doute, la solution la plus simple (suggérée dans les réponses sur le superutilisateur ) est d'installer ce script Greasemonkey . Il a l'avantage qu'il essaie d'être intelligent en bouclant uniquement sur les éléments html pertinents et en essayant de reconnaître les fenêtres pseudo-pop-up, et de ne pas les fixer. Il sera automatiquement exécuté sur toutes les pages Web chargées, sauf si vous modifiez la ligne d'en-tête @include . (Je ne l'ai pas vraiment testé.)

Si vous voulez un bookmarklet, cela devrait faire le travail (testé sur 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";}}}()) 

En prime, compte tenu de cette position: sticky css position: sticky têtes position: sticky font maintenant apparaître leurs têtes feines, vous pouvez vous débarrasser des éléments «fixes»:

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

Non compressé:

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

C'est bien:

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

Un en-tête collant est un signe certain de choses que vous ne voulez pas sur votre écran, et cela les détruit!

Cela pourrait probablement le modifier pour les modifier de fixe en statique, mais je n'ai pas trouvé de cas où je le souhaite.

Remettre à jour à nouveau

Une solution 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) 

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