Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here



How to keep content on the screen when scrolling (without that annoying animation that you see on other sites!) by adam0101
Posted: 27 Aug 03 (Edited 20 Sep 05)

You have no doubt seen floating layers on web sites before. You may also have noticed whenever you scroll down the page how these floating layers freak out as they try to reposition themselves into your field of view. Personally, I find this very annoying. Wouldn't it be great if you could have a floating layer without the flickering behavior? Well now you can! It's actually fairly simple. The key is to:
  1. Turn off the browser's normal scrollbars.
  2. Put your main content in a div that has the overflow style set to "auto" or "scroll".
  3. Put the content you want to "float" in a div outside of the content div.


<script language="JavaScript">
// Change these values to fit your needs
var alignRight    = true;
var alignBottom    = false;
var offsetX     = 25;
var offsetY     = 20;

function adjustDivs(){
  var df=document.getElementById('divFloat');
  df.style.left = alignRight ? document.body.clientWidth-(parseInt(df.offsetWidth)+offsetX) : offsetX;
  df.style.top = alignBottom ? document.body.clientHeight-(parseInt(df.offsetHeight)+offsetY) : offsetY;
<body scroll=no leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onload="adjustDivs()" onresize="adjustDivs()">
  <div id="divContent" style="position:absolute; width:100%; height:100%; overflow:auto;">
    <!-- Put your content that exists between the BODY tags here -->
  <div id="divFloat" style="position: absolute; left:0px; top:0px; background-color: #cccccc; width:200px; height:200px;">
    <!-- Put the content that you want to "float" here -->

Please post any comments you may have in thread216-1028974.



Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close