DIV 从绝对位置固定

Question

这是一个很明显的效果，但我不知道该怎么做，我想在绝对位置有一个DIV，例如在页面中间 但是当你向下滚动并且导航器的 "border-top" 触及 div 时，它与

一样

position:fixed; top:0px

有什么办法只用css3吗？我想我可以用 jQuery 和动态地改变 类 来做到这一点，但我相信有一个简单的方法

谢谢

Answer 1

如果没有 Javascript/jQuery 的帮助，在普通的 CSS3 中是不可能的，至少有几个原因：

1. CSS 是一种语言，您只能在其中定义 规则 来确定 HTML 元素的外观，而不能实现其他编程概念，例如 条件、变量等。 [然而 SASS（Syntactically Awesome Stylesheets）确实支持使用上述内容，但它缺少 Javascript 中的很多东西，例如它不能像 Javascript 那样 监听 来自 DOM 个元素的事件。]
2. 您需要在页面滚动时监听 滚动事件（这在CSS中是不可能的).要实现此 listening，您需要注册一个处理程序来 handle 触发特定事件的情况。
3. 一旦屏幕顶部的当前位置在滚动时达到某个高度（通常称为 offset），首先，您可能需要 计算 那个抵消。下一步您要做的是 添加 样式到元素，强制 position: fixed 在其上。您当然可以在 CSS 中为此定义规则，但同样，您需要 Javascript 的帮助才能在元素上强制执行此规则。