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

Question

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

我说的效果如下:

• 最初您会同时看到页眉和文章标题。
• 当您滚动页面时，页眉会消失。
• 文章标题固定在页面顶部，因此您始终可以在滚动时看到它。

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

有没有人想出任何聪明的 CSS/3 技术来制作它，以便当您向下滚动并看到 <header>消失，<nav>会自然地爬到页面顶部吗？

Answer 1

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

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

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

您不能像使用 JavaScript 那样“监听”滚动事件，因此您不能根据滚动量定位元素，也不能实时更改其位置值，因为即使这样您也需要 JavaScript。

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

您可以像您一样做一些事情，但这意味着更多的标记语言、更多的 CSS 和更多的维护困难。

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