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

Question

就像在Yahoo.com中一样，当我们向下滚动页面时，它的搜索框会卡在特定滚动位置的窗口顶部？怎么做，是否有可能使用CSS？

Answer 1

您需要为要修复的div设置容器div。你想要显示在顶部的div将在这个div里面，如下所示：

<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*/

Answer 2

整洁的CSS / JavaScript solution。

Answer 3

你应该定义

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

这将从顶部悬挂div 10px，从左侧悬挂20px，在页面滚动期间它会卡在那里。

另外你应该添加一些你想要的其他属性， - 也许显示：block;和其他参数。

Answer 4

position: fixed;

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

Answer 5

这是一个非常基本的演示，完全符合您的要求。使用jQuery来简化任务，但这很简单，如果你愿意，你可以把它变成纯JS。

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

这样做很简单;

1. 它保存了我稍后需要的一些变量＆amp;从不改变变量，例如最初的偏移量。
2. 将事件绑定到窗口的滚动事件，如果我们进行简单检查以查看顶部的当前位置是否多于或少于我们想要使用窗口滚动的元素的偏移量。
3. 如果滚动顶部更多并且它缺少类，它应该在那一刻分配它，css完成其余的工作，另一种方式是当从顶部开始的位置变得小于我们元素的原始偏移时。 / LI>

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