0

In my webpage a division in the left hand side should be fixed in a particular position.I am using position:fixed;top:150px;left:0px;. So now even we scrolldown the page the division will not change from the current position.

But here i am facing a problem. If am scrolling down the page 150px or more i am getting the white space of 150px at the top of that left hand side division.

So what my requirement is if am scrolling down the page 150px or more then the css of that left hand side division should be changed to position:fixed;top:0px;left:0px; and as well as when i am going to top of the page again the css should change to position:fixed;top:150px;left:0px;

I came to know that this can't be done with only CSS and we have to use JS along with the CSS. But i don't know how to do that.

Please help me...!!

Thanks in advance, Sreeram

4

1 回答 1

2

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

我创建了一个 jsfiddle，一旦文档滚动超过 150 像素，它就使用 js 向元素添加一个类。如果它们回滚到 150 像素以上，它也会删除该类。

http://jsfiddle.net/KQCRC/

.fix {
    position:fixed;
    top:150px;
    left:0px;
    width:100px;
    height:100px;
    background:#fff;
}
.fix.scrolled {
top:0;
}
于 2013-04-24T05:36:30.217 回答