← 全部文章

教程

驯服那些盖住你内容的粘性元素

15 5月 2026 · 作者 JustZix Team

一个在你滚动时一直保持 90px 高的粘性页头。一个「订阅新闻邮件」的悬浮栏。一个盖住段落最后一句话的「返回顶部」按钮。粘在屏幕上的元素能吃掉三分之一的视野。下面是如何驯服它们。

是什么让它们粘住

两个 CSS 属性：position: sticky（元素在你滚动到它的位置时粘住）和 position: fixed（元素从一开始就固定不动）。两者都能被覆盖。

两种做法

解除粘附 —— 元素留下，但随页面滚动。对有用的页头很好，它们只是不该永远待在顶部。

header, .site-header, .navbar,
[class*="sticky"], [class*="fixed"] {
  position: static !important;
}

隐藏 —— 元素彻底消失。对悬浮 CTA、「返回顶部」小部件、促销栏很好。

[class*="back-to-top"], [class*="scroll-top"],
[class*="sticky-cta"], [class*="floating-bar"] {
  display: none !important;
}

如何找出罪魁祸首

不确定哪个元素是粘的？打开 JustZix 的 JS Console 并输入：

[...document.querySelectorAll('*')]
  .filter(el => {
    const p = getComputedStyle(el).position;
    return p === 'fixed' || p === 'sticky';
  })
  .forEach(el => console.log(el));

控制台列出每个 fixed 和 sticky 元素 —— 把鼠标悬停在每个上面在页面里看到它，然后把它的类名复制到规则的选择器里。

坑

• 解除页头的粘附在美观上可能有代价。有些布局依赖页头是 fixed 的；在 position: static 之后下面的内容可能往上跳。通常可以接受，但检查一下。
• 不是每个粘性元素都坏。一个粘性目录或一条阅读进度条可能有用 —— 精确瞄准，别一锅端。
• 按类名片段的选择器。[class*="fixed"] 也会命中 .fixed-width，它和定位毫无关系。在它上面用 position: static 不会破坏任何东西，但知道这点总是好的。

另见

• 示例 —— 隐藏聊天小部件的代码片段及其他
• 隐藏 cookie 横幅 —— 对碍事元素的相近精简
• 打造你自己的阅读模式 —— 把页面彻底精简

安装 JustZix —— 把被粘性栏占去的屏幕夺回来。