Question

本网站：

有一个非常恼人的标题，总是在屏幕上，不会滚动。

如果我右键单击它并在firefox中'检查元素'，那么我发现css包含“position：fixed;”，如果我取消这个，标题就会表现出来，并且像上帝所希望的标题一样滚动做。

有没有办法让firefox自动执行此操作，即删除所有位置：渲染之前所有页面中的固定行？

编辑-------

经过一番思考，我想要的是一个可以杀掉这类东西的书签。

那么如何让SciMonster看起来更有前途：

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

到

javascript:???

适合进入firefox书签的位置字段吗？

如果你转到http://nautil.us，然后点击书签按钮，则浮动标题会停止浮动并滚动，就像你在元素检查器中删除了position: fixed;一样。

Answer 1

我发现this answer告诉我如何找到具有特定CSS属性的元素（使用jQuery）：

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

如果我们然后使用返回的集合，我们可以将位置重置为静态：

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

只需将其放在一个用户脚本中（包含jQuery）就可以了！

非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

关于这两个问题 stackoverflow 和 superuser 非常相似。

可以说，最简单的解决方案（answers on superuser中建议）是安装this greasemonkey script。它有它只是通过相关循环来试图变得聪明的优点 html元素并尝试识别伪弹出窗口，而不是解除那些。它将自动在所有加载的网页上运行，除非您编辑@include标题行。（我实际上没有测试过它。）

如果你想要一个书签，那么这应该做的工作（测试在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";}}}())

作为奖励，考虑到现在是css position: sticky标题也冒出丑陋的头脑，你可以摆脱它们并“修复” 元素：

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

未压缩：

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 3

谢谢你，Scimonster。我使用了你的jQuery解决方案，但改为查询头标记（和导入的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 4

这很棒：

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

粘性标题是您不想在屏幕上显示的内容的确定标志，这只会摧毁它们！

可能会修改它以将它们从固定更改为静态，但我还没有找到我真正想要的情况。

Answer 5

再次更新

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

如何禁用位置：在网页中修复？

5 个答案: