固定元素在滚动时移动到页面顶部 - 仅限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。

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

您无法像使用 JavaScript 那样“监听”滚动事件，因此您无法相对于滚动量定位元素，也无法实时更改其位置值，因为即使为此您也需要 JavaScript。

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

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

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