how to fix a division using css and js..?

Question

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

You can refer this this and example links given in answers http://stackoverflow.com/questions/8972643/keeping-header-element-always-on-top-when-scrolling — Kamal Pundir, Apr 24 '13 at 05:41

score 2 · Accepted Answer · answered Apr 24 '13 at 05:36

So based of what you said above you want to have an element follow you down the page but change it's top position after you scroll down a little ways.

I've created a jsfiddle that uses js to add a class to an element once the document is scrolled past 150px. It also removes that class if they scroll back above 150px.

http://jsfiddle.net/KQCRC/

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

Thank you very much........!! Its perfectly working now....!!..Once again thanks a lot..!! — user2281995, Apr 24 '13 at 06:02

how to fix a division using css and js..?

1 Answers1