Image Scroll

[cguan_77]

hi guys, how to make an image/text to scroll as the user scroll the page also? for example if the user scrolls down image/text also scrolls down and when the user scrolls up image/text also scrolls up..

any ideas on how to get started? thanks in advance.. :)

[ShawnCplus]

You can get it done with just CSS

#some_id {
  position: fixed;
}

[cguan_77]

hi ShawnCplus, thanks for the help it's working, but i just get some little problem..i made like this:

<STYLE type="text/css" media="screen">

div#topfix
{
margin-top:400px;
position:fixed;
}
</style>

and on the html page..

<div id="topfix" >
<A  href="#pagetop">Top of Page </A>
</div>

but why if i give a value on margin-top like 600px the text will went missing..i mean i can't see it on the page.. any ideas? thanks in advance...

[Troy III]

hi ShawnCplus, thanks for the help it's working, but i just get some little problem..i made like this:

<STYLE type="text/css" media="screen">

div#topfix
{
margin-top:400px;
position:fixed;
}
</style>

and on the html page..

<div id="topfix" >
<A  href="#pagetop">Top of Page </A>
</div>

but why if i give a value on margin-top like 600px the text will went missing..i mean i can't see it on the page.. any ideas? thanks in advance...

On what browser?
If you are talking about firefox: your text is being clipped off.
If you try the same with position:absolute instead of position: fixed and still, there is no text in the document view area - you are dealing with an old bug that Netscape browsers never got rid off.

To fix it, try this css addition:
html, body {height: 100%; width:100%}

the #topfix content will come back into view.
p.s.:
If this doesn't fix it - your problem is the screen resolution!
(more details after your reply)

Regards.

[cguan_77]

hi TroyIII, i've tried your suggestion but problem still exists..
my browser is Firefox 5.0...agree with you if the position is beyond the document view area..it will went missing..

regarding your suggestion for the screen resolution, how to dealt with it..sorry just starting to get familiar with css stuff... thanks.. :)

[Troy III]

Regarding the screen resolution - you will need a bigger screen to see your fixed content. Since your screen is less than 600px of usable height.

'Cause otherwise I'm sure that my suggestion should have already fixed it.
Try to lessen this margin-top value gradually and see at what size does the content come up into view.

And of course - if this isn't the case and you have other elements on that page;
Please do the following:
- Set the z-index of your #topfix element to say 1000.

{
margin-top:600px;
position:fixed;
z-index: 1000;
}

[cguan_77]

thanks for the help guys, i found a work around using jquery from this site.... http://stackoverflow.com/questions/1408941/how-do-you-have-a-floating-fixed-element-on-a-web-page-depending-on-which-part-of