iFrame to move when the parent HTML page scrolls up/down, so the iframe is always in focus

  • I am looking to: be able to make sure the iframe is always on focus, and should move down when the page scrolls down, and move up when the page scrolls up, so that theuser can always see the iframe.
  • Issue i am seeing is: When I scroll down, the images on the parent page covers the iframe.
  • I want the iframe to be visible on the top of the images.
  • Its position must be on the top of the page always, but as the page scrolls down, it should not lose focus on the iframe.
  • Stack Overflow works best with JavaScript enabled

I am looking to:
be able to make sure the iframe is always on focus, and should move down when the page scrolls down, and move up when the page scrolls up, so that theuser can always see the iframe. Its position must be on the top of the page always, but as the page scrolls down, it should not lose focus on the iframe.

@ng_real_ninja: iFrame to move when the parent HTML page scrolls up/down, so the iframe is always in focus …

My code is:

I am looking to:

be able to make sure the iframe is always on focus, and should move down when the page scrolls down, and move up when the page scrolls up, so that theuser can always see the iframe. Its position must be on the top of the page always, but as the page scrolls down, it should not lose focus on the iframe.

Any help will be appreciated.

Thanks for the response! Issue i am seeing is: When I scroll down, the images on the parent page covers the iframe. Instead, I want the iframe to be visible on the top of the images. any suggestions will help. – Myrah 2 hours ago

You could possibly fix this with the z-index property, but I’m not sure what’s going on with your code. Could you post some code snippets or better yet make a jsfiddle with the relevant html and css? – Craig Mason 2 hours ago

That should help solve your problem, but you may also want to center the iframe somewhere on the page, and give it an opacity lower than 1, so it doesn’t overlap with any other elements on the page. You can also use the

iFrame to move when the parent HTML page scrolls up/down, so the iframe is always in focus