7

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

我说的效果如下：

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

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

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

4

1 回答 1

2

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

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

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

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

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

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

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

于 2011-08-23T14:33:34.153 回答