固定元素在滚动时移动到页面顶部 - 仅限 CSS答案

【问题标题】：Fixed element that moves to top of page on scroll - CSS only固定元素在滚动时移动到页面顶部 - 仅限 CSS
【发布时间】：2026-01-11 11:15:01
【问题描述】：

我希望在此页面上产生效果：http://jonrohan.me/guide/css/creating-triangles-in-css/ - 但只有 CSS，没有 JavaScript（这对于 JavaScript 来说是微不足道的）。

我说的效果如下：

到目前为止，我取得的最好成绩是：
http://jsfiddle.net/nottrobin/2FSvx/
但我不喜欢我的解决方案中固有的 <nav> 的重复。

有没有人可以想到任何巧妙的 CSS/3 技术，以便当您向下滚动并且 <header> 消失时，<nav> 会自然而然地上升到页面顶部？

【问题讨论】：

考虑到绝对没有基于滚动/位置的选择器，我不这么认为。你会像你自己一样被限制在 z-index 技巧上。
嗯，我有几个想法 - 例如将<header> 和<nav> 放在position: fixed <div> 中，然后将<header> 设为静态，希望@ 987654332@ 将向上滚动并在固定的<div> 中只留下<nav>。没用。还尝试了绝对定位<header>，但这也没有用。我仍然有点希望可能会有一个 hack 使 <header> 不是 position: fixed 但不知何故它仍然向下推 <nav> 元素。继续玩吧。
我认为这是不可能的，因为父元素是静态元素，子元素将始终跟随父元素（假设父元素设置为position: relative，子元素必须跟随它)。
@kmiyashiro 是的，我担心显示模式之间可能存在无法克服的根本差异。顺便说一句，您是否知道一个特别好的资源来解释具有不同positions（static、fixed、relative、absolute）的元素在不同情况下如何相互交互？跨度>
我发现 MDN 是最好的参考：developer.mozilla.org/en/CSS/position

【解决方案1】：

您的示例有一些问题，如果我向下或向上滚动网页，有时两个导航重叠并且内容显示两次并重叠。

据我所知，目前还没有这种技术可以仅使用 CSS 获得相同的效果，需要 JS。

您只能使用 CSS 以静态方式（正常页面流）、固定方式（相对于浏览器窗口）或绝对/相对（相对于最近的父级且位置设置为相对）定位元素。

你不能像使用 JavaScript 那样“监听”滚动事件，因此你不能相对于滚动量来定位元素，也不能实时改变它的位置值，因为你甚至需要 JavaScript。

CSS 是一种表示性标记语言，您使用 CSS 规则分配给元素的属性不能基于事件进行更改。

你可以像以前那样做，但这意味着更多的标记语言、更多的 CSS 和更多的维护困难。

您应该使用 JS 来优化用户体验，如果用户禁用了 JS，他/她将看到正常的页面行为，否则 nav 元素将保持静止，就像所有其他网站一样。

【讨论】：

很抱歉投反对票，但这并不完全是一个答案。也适用于过度判断的“你的例子不好”。我确实注意到了重叠，认为这不是世界末日。
你问是否有办法只用 CSS 来做。我的回答是否定的。对我来说这是一个答案。我什至建议你的方法有一些问题。
您的回答是“据我所知，没有”。没有解释为什么就 CSS 理论而言，没有参考资料。指出问题是有帮助的，但说某事“不好”就没那么有用了。
你是绝对正确的。我在答案中添加了更多信息，同时我希望有人会在 CSS 中提出解决方案！ :)
很公平。您编辑了答案。 +1ed。谢谢。我将尝试稍微缓解重叠问题。尽管如此，我还是不同意在 CSS 中实现这是一件不合理的事情——毕竟它是展示性的。而且我仍然不是 100% 相信这必然是不可能的——尽管它很可能是不可能的——因为人们已经用 CSS3 实现了一些非常了不起的事情——制作固定在页面底部的页脚，甚至绘制三角形：@987654321 @ 和纯 CSS 中的歌剧标志：goo.gl/y9CQ。我不会放弃一周左右的时间。