Position:fixed to relative

[deceivingrakesh]

I'm having a problem with css positions !! i want the position of an image to be fixed when the user scrolls till some point and the position should be set to relative after that .

Thanks in advance !

[Taywin]

That is not easy to do because you will have to monitor the scrolling position. How about breaking the display into 2 divs, and then put the "fixed" part inside one of the div. The moving should stop once you scroll pass the div that the fixed part is in.

[deceivingrakesh]

That is not easy to do because you will have to monitor the scrolling position. How about breaking the display into 2 divs, and then put the "fixed" part inside one of the div. The moving should stop once you scroll pass the div that the fixed part is in.

Thanks for the reply but i didnt understand it! we'll place 2 divisions and one of it is fixed , but how ll it disappear after the scroll gets over at some point!

[Taywin]

Do you mean hide the fixed part and show the part in the relative area? By the way, what browser are you using to do the "fixed" position? I know that IE has different implementation.

[phoenix_2000]

you could indeed create 2 divs, and when your mouse goes over the second div, you could use JavaScript to change the position.
I know it's not the same as scrolling, but quite frankly, i don't even know if that is possible.

[Taywin]

@phoenix_2000
That's actually a clever idea. :) Yes, you could do it using onmouseover event on each div. You could have 2 of the same image display in both div but one is set to fixed and the other is relative. Though, if the mouse cursor is on one, then hide the other if it is not hide. :)

[deceivingrakesh]

Ya , but now i have used some logic and i have got the image to move down 2px / scroll but now im having another problem !! is there any event like "ONSCROLLUP" and "onscrolldown", and when i use object.offsettop it gets me the top of the object relatively to the document , but i want the top position of the element with respect tot he screen , is that possible ?

[Taywin]

If you use offsetTop or offsetLeft, you need to iterate up to the parent element you want to sum the total value (in this case, it could be body tag). If you use it only once, the value is the current relate to its directly parent element. ;)

[phoenix_2000]

Wow Taywin, it took me 3 reads just to understand that post :)
Anyway, i think i found something interesting on the interwebz: http://bytes.com/topic/javascript/answers/150705-window-scroll-detection

I didn't read the entire post, but from what i can gather, he uses a function that messures the Y-axis offset and the X-axis offset, and calls that function every 1000 ms ( = 1 second).

[deceivingrakesh]

@taywin so are u suggesting me to loop it with a condition ??? :)

@pheonix , that article was good thanks mate :)

[deceivingrakesh]

And guys another thing i want to know !! is it possible to find out which element is on the screen !?

[Taywin]

Yes, deceivingrakesh... Please read http://www.quirksmode.org/js/findpos.html about how to do it. Also remember that IE may return different value compared to FF or Chrome. So if you want it to work perfectly, make sure that you know which browser is rendering the page.

[deceivingrakesh]

Guys i still haven't got it to work !!! :( let me give an example of i want it to be like !! in the new Facebook interface on the right side there's a new feature where we can see all the status updates and stuff from friends !! when we scroll down till some distance its position is relative !! after some distance its position becomes fixed and vice-verse!! that's what i'm looking for !

[Taywin]

Hmm... Could I see your draft script and the display in HTML? Don't need detail... You could do something like...

// script part
function callThisFunc(arg1, arg2, ...) {
  ...
  ...
  var realOffsetT = 0
  while(node!=targetParent) {
    realOffsetT += node.offsetTop
    node = node.parentNode
  }
  ...
}

// HTML part
...
...
<div class="fixedDisplay">
  ...
</div>
...
...
<div class="relativeDisplay">
  ...
  ...
</div>
...

[deceivingrakesh]

lets say

<table>
<tr>
<td id="td1">
place where some content is located !
</td>
<td id="td2">
place where a small image is located at the top of the "td" and position is fixed
</td>
</tr>
</table>
now what i want the script to do is , once the user starts scrolling , once image in td2 reaches the point where "td1" leaves the screen (bottom of td1 leaves the screen upwards and goes off the screen) the position of the image in "td2" should not be fixed , !!

[Taywin]

Hmm... You know... The more you explain, the more I am confuse about the word "fixed"? The reason is that before I thought the "fixed" means you use CSS to do the "position: fixed" which does not work really well in IE, but now I am not sure. Is it like...

/*
The current screen...
+-----------------+-------+  <-- 0px
|  content        |  img  |
|                 |       |
|                 |       |
|                 |       |
|                 |       |
|                 |       |
|                 |       |
|                 |       |
+-----------------+-------+  <-- 600px


now scroll down to 600px, where is the image?
+-----------------+-------+  <-- 600px
|  content        |       |
|                 |       |
|                 |       |
|                 |       |
|                 |       |
|                 |       |
|                 |       |
|                 |       |
+-----------------+-------+  <-- 1200px
*/

Maybe what you need is position:absolute???