移除遮住内容的粘性页头
粘性页头本应让导航触手可及。可它们往往只是跟着你往下追,吞掉三分之一的屏幕,遮住你刚刚点击想看的标题。下面是用 JustZix 驯服它们的方法。
粘性页头的两个问题
第一,它们占用垂直空间——在笔记本上,一条肥厚的粘性栏加一条粘性 Cookie 条能吃掉半个视口。第二,它们破坏锚点链接:跳转到某个章节,标题会落在页头后面,被遮住。两者都是纯 CSS 就能修的。
配方 1:彻底取消页头的粘性
如果你不需要导航栏跟着你,最干净的修法是让它像普通内容一样滚走。
/* 让页头像普通内容一样滚走 */
header, .site-header, .navbar,
[class*="sticky-header"], [class*="header-fixed"],
[style*="position: sticky"], [style*="position:fixed"] {
position: static !important;
top: auto !important;
}这是本文中影响最大的一条规则:你立刻就能拿回屏幕空间,而且当你向上滚动时页头仍在顶部。
配方 2:保留页头但修复锚点跳转
也许你喜欢粘性导航栏,只是讨厌它在锚点跳转后遮住标题。scroll-margin-top 属性告诉浏览器留出空间。
/* 阻止粘性页头遮住锚点目标 */
:target,
h1[id], h2[id], h3[id], h4[id] {
scroll-margin-top: 90px !important;
}把数值设为大约页头的高度。如果标题仍然落得太高或太低,就调整 90px,直到锚定的章节正好落在栏的下方。
配方 3:缩小过大的页头
有些页头既粘又大。如果你想保留它的固定但夺回空间,就限制它的高度并隐藏笨重的额外部分。
/* 给臃肿的粘性页头瘦身 */
.site-header, header.sticky {
max-height: 48px !important;
overflow: hidden !important;
}
/* 去掉次级行:搜索栏、推广条 */
.header-promo, .header-secondary,
.sub-nav, .announcement-bar {
display: none !important;
}配方 4:在你向上滚动前隐藏页头
想要更精致的效果,可以在阅读时隐藏页头,只在你向上滚动时显示它。这需要一小段 JS 规则。
// 只在向上滚动时显示页头
let lastY = window.scrollY;
const bar = document.querySelector('header, .site-header, .navbar');
if (bar) {
bar.style.transition = 'transform .2s ease';
window.addEventListener('scroll', () => {
const y = window.scrollY;
bar.style.transform =
(y > lastY && y > 200) ? 'translateY(-100%)' : 'translateY(0)';
lastY = y;
}, { passive: true });
}现在页头会在你往下读时收起,并在你向上滚动的瞬间滑回来——这本该是大多数网站一开始就做好的行为。
别忘了页脚
粘性页脚和聊天气泡在屏幕底部造成同样的吃内容问题。同样的方法可以清掉它们:
/* 移除粘性页脚和聊天小部件 */
.sticky-footer, [class*="cookie-bar"],
[class*="chat-widget"], [id*="intercom"],
[class*="floating-cta"] {
display: none !important;
}选择合适的配方
- 想要最大空间?用配方 1。
- 喜欢导航栏,讨厌跳转?用配方 2。
- 想要折中?组合配方 3 和 4。
按站点应用它们,因为各处的页头标记各不相同。JustZix 让每个网站的规则保持独立,这样你可以调整一个而不影响其余。
开始夺回你的屏幕
从下载 JustZix 页面安装,并浏览现成示例获取更多布局修复。粘性页头常常与广告横幅共享空间——用我们位于/zh/blog/block-display-ads-with-css-rules 的指南也把它们清掉。
为这篇文章评分
暂无评分 — 成为第一个。