javascript - 如何使用 css 和 js 修复除法..？

Question

在我的网页中，左侧的一个分区应该固定在一个特定的位置。我正在使用 position:fixed;top:150px;left:0px;。所以现在即使我们向下滚动页面，分区也不会从当前位置改变。

但是这里我遇到了一个问题。如果向下滚动页面 150px 或更多，我会在左侧部分的顶部得到 150px 的空白区域。

所以我的要求是，如果我向下滚动页面 150px 或更多，那么左侧部分的 css 应该更改为 position:fixed;top:0px;left: 0px; 以及当我再次回到页面顶部时，css 应该更改为 position:fixed;top:150px;left:0px;

我开始知道这不能只用 CSS 来完成，我们必须将 JS 与 CSS 一起使用。但我不知道该怎么做。

请帮助我...!!

提前致谢， sleep

Answer 1

因此，根据您上面所说的，您希望有一个元素跟随您在页面中向下移动，但在您向下滚动一些方式后更改它的顶部位置。

我创建了一个 jsfiddle，它使用 js 在文档滚动超过 150px 后向元素添加一个类。如果他们向后滚动超过 150 像素，它也会删除该类。

http://jsfiddle.net/KQCRC/

.fix {
    position:fixed;
    top:150px;
    left:0px;
    width:100px;
    height:100px;
    background:#fff;
}
.fix.scrolled {
top:0;
}