☰

隐藏滚动时仍“卡”在顶部的网页标题

tag-icon • tag-icon firefox css
隐藏滚动时仍“卡”在顶部的网页标题

很长一段时间以来，标题“卡”在页面顶部一直困扰着我。这是我遇到的最新示例：

滚动之前的网站：

滚动浏览前的网站

向下滚动一点后的网站：

滚动后的网站

（地点这里）

请注意标题如何阻挡部分文本，从而有效缩小了浏览器的水平尺寸。

我使用的是 Firefox，我了解到，我可以通过使用检查元素并为元素添加内联 CSS（例如）来隐藏这些麻烦的标题display: none。虽然这总比没有好，而且在我真的想阅读文章时很有效，但每次访问网站时都必须这样做，这很烦人。我也知道我可以使用用户样式表创建永久规则来隐藏特定网站的元素，但这也是我想避免的事情，因为它相当耗时。

简而言之，我的问题是：有没有办法用脚本自动隐藏元素，或者编写用户样式表来始终隐藏这些类型的标题？

答案1

自 2016 年 1 月起，固定（取消滚动）标题不再那么流行，但如果有人仍想以编程方式操作固定元素，则可以使用纯 JavaScript 轻松检索：

// get Array of all body elements that contain css rule position: fixed
var fixed_elements = Array.prototype.filter.call(
  document.querySelectorAll('body *'),
  function (e) {
    return window.getComputedStyle(e).getPropertyValue('position') === 'fixed'
  }
)

例如我发表了我的滚动离开GitHub 上的 UserScript 将样式更改为position:absolute（保持元素可见，但它们将与页面的其余部分一起滚动）：

答案2

你可以使用类似油脂猴。然后只需添加一些自定义 javascript 即可编辑该网站上该元素的 css。下次您访问该网站时，它应该会再次出现在那里。

答案3

我使用 Adblock Plus 的 Element Hiding Helper 来删除您描述的元素类型（我认为这些元素称为“style: fixed”元素）。具体来说，当我想删除某个元素时，我会单击工具栏中的 Adblock Plus 图标，选择“隐藏元素”（或类似选项 - 此计算机上目前没有 Firefox），然后我必须使用鼠标和一些键的组合（例如，“w”表示“扩大选择”，“n”表示“缩小选择”，“s”表示“是的，这是我要删除的元素”）来选择一个元素，然后与对话框交互。但是，一旦我这样做了，每次我使用 Firefox 访问该特定网站时，该元素都会消失。我已经对数十个网站执行了此操作，它确实隐藏了我告诉它隐藏的元素。

https://addons.mozilla.org/en-US/firefox/addon/elemhidehelper/

（我更喜欢隐藏全部默认情况下使用“style：fixed”元素，并为我提供了一种方法来表明我希望在特定网站上显示而不是隐藏特定的“style：fixed”元素，但我不知道任何方法。）

答案4

这是 ccpizza 代码的改进版本。它修复了只删除一个顶级元素而不是删除所有顶级元素的错误。

javascript:(function(){var%20found=true;while(found){var%20elems=document.body.getElementsByTagName("*");var%20len=elems.length;for(var%20i=0;i<len;i++){found=false;if(window.getComputedStyle(elems[i],null).getPropertyValue('position')=='fixed'){var%20el=elems[i];el.parentNode.removeChild(el);found=true;break;}}}})()

相关内容