如何使Div在特定滚动位置固定？

Question

就像在Yahoo.com中一样，当我们向下滚动页面时，其搜索框会在特定的滚动位置上固定在窗口顶部？如何实现这一点，是否可以使用CSS？

- sandbox

Answer 1

您需要为将要固定的div设置一个容器div。您想要始终显示在顶部的div将位于此div内，如下所示：

```html

```

<div id="fixedDivWrapper">
  </div id="scroll">
    This stays still!
  </div>

还有您的CSS：

position: fixed; /*This fixes it to the top of the div.*/
top: 20px; /*Margin at the top of the fixed div*/

- Undefined

---

但是我需要在页面向下滚动时将其固定（或粘贴）...例如：http://chrispederick.com/work/web-developer/ 在此网站上向下滚动页面并查看右侧div。 - sandbox

啊，我没有回答他们是如何做到的。我会改变我的回答。 - Undefined

Answer 2

一个整洁的CSS/JavaScript 方案。

- Achal Dave

Answer 3

你应该定义

position: fixed;
top: 10px;
left: 20px;

这将使 div 距离顶部 10 像素，距离左侧 20 像素，并且在页面滚动期间会固定在那里。

此外，您应该添加其他属性，例如 display: block; 和其他参数。

- Jibla

---

我希望DIV只有在达到特定的滚动位置后才固定。就像Facebook中的“右侧边栏”。 - sandbox

然后，您需要一些JavaScript。您无法仅使用CSS完成它。 - Jibla

Answer 4

position: fixed;

但请注意，这在IE6或iOS Safari < 5中不起作用。

- Simon West

Answer 5

这是一个非常基本的演示，完全可以满足您的需求。使用jQuery简化任务，但如果您想要的话，这也足够简单，可以使用纯JS实现。

http://jsfiddle.net/sg3s/uU8Wb/

这个程序的作用很简单：

1. 它保存了一些稍后需要使用的变量，以及像初始顶部偏移量这样的永远不会改变的变量。
2. 将一个事件绑定到窗口的滚动事件上，在事件中我们进行一个简单的检查，看看当前位置是否比我们想要与窗口一起滚动的元素的偏移量更多或更少。
3. 如果滚动条位置更高，并且此时缺少应该具有的类，则分配它，CSS会完成其余工作；当距离顶部的位置小于我们元素的原始偏移量时，情况就相反。

这里的魔法在于简单性，如果我们可以使用CSS完成两个任务，但需要选择每个状态何时处于活动状态，我们只需编写一个脚本来切换类，而不是依赖JS来完成所有操作。

- sg3s