网页滚动时保持在顶部的 DIV答案

【问题标题】：A DIV that stays at the top while a web page scrolls网页滚动时保持在顶部的 DIV
【发布时间】：2010-12-05 15:27:34
【问题描述】：

当用户向下滚动网页时，如何让 DIV 保持在页面顶部的视觉效果？

一个简单的 Javascript 框架会很棒！

【问题讨论】：

给你：net.tutsplus.com/tutorials/html-css-techniques/… 有趣的是，我也有同样的问题，但我希望重新创建 Apple Store 购物车侧边栏。它的工作原理类似，只是它在到达某个滚动位置时交换 div 的 CSS 类，因此它从绝对变为固定。任何人都知道我在哪里可以找到这个，我到处寻找复制效果的教程。
接受科比的回答。 JavaScript 框架就像用机关枪打蚊子一样。 CSS 是正确的方法。
他们使用 CSS 将购物车设置为绝对位于该列的顶部，并且由于列上的横幅（“标题”）是固定高度，他们有 javascript 说如果窗口顶部是文档高度中的特定点，则整个列固定。如果您仔细阅读代码，您会发现他们使用了一种叫做 coherent 的东西来使其工作。
我查看了您在问题中提到的网站，我真的很喜欢它，您做得很好。

【解决方案1】：

这很简单，只需将顶部的 Div 位置设置为固定即可例如

开始div标签

<div style="position: fixed;background: #336699; width: 100%;">

位于 div 标签的顶端

【讨论】：

【解决方案2】：

如果不关心IE6，可以使用position: fixed：

div {
  top: 0;
  position: fixed
}

【讨论】：