Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Move Iframe When User Scrolls Down in Web Browser

want to see how i can move an iframe while user scrolls

3:22 pm on Jul 15, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 18, 2003
posts: 86
votes: 0

hey i have a question about iframes

here is the barebones code
--big list thats variable and generated with php
--this big list is longer than the iframe's height
<iframe width="675" height="600" src="$url"
image that i want the user to see as they look at the big list in the left cell

Bascially what i want to do is get the iframe to move as the user scrolls down the web page so that while the user is looking at the big list in the left cell the iframe containing an image i want the user to see while they look at the list in the right cell will move down as the user scrolls

One workaround i've seen is to also put the left cell's data in an iframe so that the user actually scrolls in the left cell (the right cell is smaller so it stays even with the left cell's iframe). But i'd like to avoid doing this so i can keep the data from the left side in the actual page rather than an iframe...BUT, If i can't i guess i will have to but i figured i'd post here first thanks in advance!

10:16 pm on Aug 14, 2009 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2003
votes: 0

Hello tqatsju!

Basically, you'll want to set up a function to observe the window.onscroll event and, when it changes, get the position of the scroll, then move the iframe to that new position.

I use the Prototype library, so the code below should work if you have that same library. Otherwise, you can use this as pseudocode to put together your own solution. :)

Event.observe(window, 'scroll', function() {
$('iframe_id').setStyle({'position' : 'absolute', 'top' : document.body.scrollTop +'px'});