DIV从绝对位置固定

Question

这是一个很常见的效果，但我不知道该怎么做，我想让DIV处于绝对位置，例如在页面中间 但是当你向下滚动并且你的导航器的“border-top”接触div时，它会像

一样整合

position:fixed; top:0px

有没有办法只用css3做？我想我可以用jQuery和dinamically改变类，但我确信有一个简单的方法

谢谢

Answer 1

在没有Javascript / jQuery帮助的情况下，简单的CSS3中至少有几个原因是不可能的：

1. CSS是一种语言，您只能定义确定HTML元素外观的规则，并且不能实现其他编程概念，如条件，变量等。 [然而，SASS（Syntactically Awesome Stylesheets）确实支持上述的使用，但它缺少来自Javascript的许多东西，例如：就像Javascript一样，它不能监听来自DOM元素的事件。]
2. 滚动页面时，您需要收听 滚动事件（CSS中不可能）。要使 listen 发生，您需要在触发特定事件时向处理注册处理程序。
3. 一旦屏幕顶部的当前位置在滚动时达到某个高度（更好地称为offset），首先，您可能希望计算该偏移量。接下来你要做的是将样式添加到元素上，强制position: fixed在其上。您当然可以在CSS中为此定义规则，但同样需要Javascript帮助在元素上强制执行此规则。