如何使用css和js修复分区..？

Question

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

但在这里我遇到了一个问题。如果向下滚动页面150px or more，我会在左侧分区的顶部获得150px的空格。

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

我开始知道只有CSS才能做到这一点，我们必须使用JS和CSS。但我不知道该怎么做。

请帮帮我...... !!

提前致谢， Sreeram

Answer 1

因此，根据您上面所说的内容，您希望有一个元素跟随您向下移动页面，但在向下滚动一点后，将其更改为顶部位置。

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

http://jsfiddle.net/KQCRC/

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