设计与产品alisdair.mcdiarmid.org
干掉吸顶导航栏（2013）
Kill sticky headers (2013)
2017 — 2025，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
这是 2013 年的一篇小文，主题是干掉网页上随滚动常驻的 sticky header（粘性头部）。它面向被固定导航条挤占阅读空间的读者，讨论如何让页面恢复更普通的滚动与阅读体验。评论则进一步把矛头指向粘性页脚、滚动劫持和移动端遮挡等问题。
为什么经久不衰：粘性头部和滚动劫持十多年后仍是常见网页顽疾，而它提供了一个直接、低门槛的反制思路，所以反复被想起。
HN 评论精选
粘性头尾和广告滚动劫持在移动端侵占大量屏幕，令人无法忍受。
再结合最近粘性页脚也泛滥，尤其在小屏/移动设备上。Vice 是特别糟糕的例子：在 480px 高的屏幕上有 60px 粘性头部 + 50px 粘性页脚，23% 的屏幕空间被粘性元素占掉。页脚只有两个按钮“Share”和“Tweet”。每次向下滚动，头部滑上去，然后又滑回来，非常分心。更绝的是文章中间广告在 iframe 里劫持滚动，不划完 5 张幻灯片就不能继续滚动文章。我为什么要这样消费内容？！
SippinLean查看英文原文
Combine this with the recent surge of sticky footers as well, especially on small/mobile devices. Vice is a particularly bad offender: http://i.imgur.com/ltqYRX9.png That's a 60px sticky header + a 50px sticky footer on a 480px-tall screen. 23% of my screen space is lost to sticky elements. The footer is only two buttons, "Share" and "Tweet". Every time you scroll down, the header slides up, and then back down again. It's an incredibly distracting experience. The icing on the cake is the ad in the middle of the article, it's in an iframe that hijacks your scrolling, until you swipe through all 5 slides you cannot continue scrolling through the article. Why would I ever subject myself to consuming content this way?!
消失后轻微反向滚动就复现的头部会遮住回读内容，应改为明确手势触发或固定在顶部。
我的抱怨是那种一反向滚动就立刻重新出现的消失式头部。它应该更像下拉刷新：只有明确、幅度较大的向上滚动（手指下拉）才重新出现，或者就待在顶部该在的位置（移动端点一下就能回去）。大多数这类设计里，如果你想往回读几行，必须滚过头，否则想读的文本正好被头部盖住。
ballenf查看英文原文
My gripe is the disappearing header that reappears at the slightest twitch of reverse scrolling. The behavior needs to work more like drag down to refresh: only reappear with a deliberate and significant scroll "up" (a drag down with the finger) or just stay at the very top where it belongs (it only takes one tap on mobile to get back there). With most of them if you need to backtrack and read a few lines up, you have to scroll well past the point or the exact text you want to read gets covered by the header.
粘性头部缩小可视区域、遮挡锚点标题，滚动劫持破坏 Page Down 等基础操作。
任何劫持普通滚动行为的东西都会毁掉大多数用户的体验。越来越多网页想办法破坏 Page Down：要么一开始抢焦点，要么让滚动完全依赖 JS。粘性头部让 PgUp/PgDn 更糟，因为页面可见尺寸小于窗口，你会少一两行还得倒回去。滚动向上时重新出现的那些更糟。更糟的是，在粘性头部页面点击锚点跳转，小节标题会被粘性头部遮住。带我回静态网页吧。
awinter-py查看英文原文
anything that hijacks ordinary scrolling behavior is going to ruin the experience for most users. More and more web pages have found some way to break page down -- either by initially stealing focus or by making scroll completely JS-based. Sticky headers make pgup/pgdn worse by make the visible size of the page smaller than the window size, so you lose a line or two and have to rewind. The ones that reappear when you scroll up are even worse. Even worse, when you click to an anchor section on a sticky-header page, the title of the section is hidden by the sticky header. Take me back to the static web.
Reddit 移动端用粘性页脚和误导性按钮诱导安装 App，进一步加深用户反感。
Reddit 更糟，它的粘性页脚占屏幕 50%。它让你安装官方 app（这是我在 Android 上找到的最差 Reddit app）才能继续。但页脚显示一个大橙色“Continue”按钮（暗示继续浏览网站，而上方说明会安装 app 的文字远不如按钮显眼）。下面小灰字写着“Or go to the mobile site”（暗示会跳转到网站，实际相反）。这明显是在试图迷惑用户，每次我在移动浏览器落到 reddit 网站，都会重新点燃我对 reddit 这家公司的仇恨。
nv-vn查看英文原文
Reddit is even worse with their sticky footer that takes up 50% of the screen. It tells you to install their official app (which is by far the worst Reddit app I've found on Android) to continue. However the footer shows a big orange "Continue" button (implies that you continue through the site, the heading above this saying it will install the app is much less visible than the button's text). Below this, in tiny grey text, it says "Or go to the mobile site" (implying it will redirect to the website, which is in fact the opposite of what actually happens). This is blatantly attempting to confuse users and every time I end up on the reddit site in a mobile browser it revives my hatred for reddit: the company.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com